Summary
- 빅테크 스타일(Stripe, Vercel, Apple) UI 개발. 플래닝 → 구현까지 한 번에.
- 트리거: "프론트엔드", "UI 만들어", "페이지 만들어", "컴포넌트 만들어", "랜딩 페이지", "대시보드 UI"
- 안티-트리거: "백엔드 API", "데이터베이스", "CLI 도구"
jh941213/codex-lattice · Archived
frontend
? 트리거: "프론트엔드", "UI 만들어", "페이지 만들어", "컴포넌트 만들어", "랜딩 페이지", "대시보드 UI" 안티-트리거: "백엔드 API", "데이터베이스", "CLI 도구"
Installation
$
npx skills add jh941213/codex-lattice --skill frontend
Stronger alternatives
This repository is archived — consider an actively maintained alternative.
fastapi-templates
Same source
jh941213/codex-lattice
프로덕션 수준의 FastAPI 프로젝트 생성 및 설정 가이드. async 패턴, DI, 에러 핸들링 포함. 트리거:…
1 installs
harness-diagnostics
Same source
jh941213/codex-lattice
에이전트 하네스 12원칙 기반 자가 진단 및 개선 제안. Triggers on: 하네스 진단, audit, 환경 점검,…
1 installs
release-readiness
Same source
jh941213/codex-lattice
Release readiness workflow for Codex. Use before PR, merge, deploy, version bump, rollout, or p…
1 installs
api-design-principles
Same source
jh941213/codex-lattice
REST 및 GraphQL API 설계 원칙 가이드. 새로운 API 설계, API 스펙 리뷰, API 설계 표준 수립 시 활…
1 installsSimilar popular skills
Related neighbors and high-traction skills in the same topics — useful to compare before installing.
frontend-design
Similar name
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existi…
866.4K installs
frontend-design
Similar name
anthropics/claude-code
58.1K installs
frontend-design
Similar name
anthropics/claude-plugins-official
14.3K installs
premium-frontend-ui
Similar name
github/awesome-copilot
A comprehensive guide for GitHub Copilot to craft immersive, high-performance web experiences w…
4.5K installs
frontend-design
Similar name
vercel-labs/agent-eval
Create distinctive, production-grade frontend interfaces with high design quality. Use this ski…
1.6K installs
frontend-skill
Similar name
openai/skills
Use when the task asks for a visually strong landing page, website, app, prototype, demo, or ga…
1.6K installsAlso in this package
Other skills from jh941213/codex-lattice · top by installs.
npx skills add jh941213/codex-lattice
More details
Agent compatibility
Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.
Claude Code
Not declared
Cursor
Not declared
Codex
Not declared
GitHub Copilot
Not declared
Windsurf
Not declared
Gemini CLI
Not declared
Cline
Not declared
OpenCode
Not declared
Repository health
Stars
19
License
LICENSE
Default branch
main
Open issues
0
Status
Archived
Skill metadata
Parsed from SKILL.md frontmatter.
Allowed tools
Read, Write, Edit, Bash, Glob, GrepPackage contents
Files included with this skill beyond the listing page.
-
skill md
SKILL.md2,578 B -
docs
SUMMARY.md310 B
History
- First seen on skills.sh
- First recorded snapshot · 1 installs
SKILL.md
프론트엔드 UI 개발
빅테크 스타일(Stripe, Vercel, Apple)의 프론트엔드 UI를 플래닝 → 구현까지 한 번에 진행합니다.
워크플로우
/frontend [요청사항]
↓
1. 디자인 규격 작성 (플래닝)
↓
2. 사용자 확인
↓
3. frontend-developer 에이전트로 구현
↓
4. 결과 검증Phase 1: 플래닝
디자인 스타일 선택
| 스타일 | 특징 | 적합한 용도 |
|---|---|---|
| Stripe | 그라데이션, 밝은 톤, 미묘한 애니메이션 | 결제, SaaS, 랜딩 |
| Vercel | 다크모드, 미니멀, 모노톤 | 개발자 도구 |
| Apple | 넓은 여백, 타이포 강조 | 제품 소개 |
| Linear | 다크, 보라색 악센트 | 생산성 앱 |
| Notion | 밝은 톤, 아이콘 활용 | 문서/협업 |
규격서 템플릿
## [프로젝트명] 디자인 규격
### 스타일: [선택한 스타일]
### 컬러
- Primary: #[hex]
- Background: #[hex]
- Text: #[hex]
- Border: #[hex]
- Accent: #[hex]
### 타이포
- Display: [폰트] / [크기]
- Body: [폰트] / [크기]
### 컴포넌트
1. [컴포넌트1]: [설명]
2. [컴포넌트2]: [설명]
### 레이아웃
- Max width: [px]
- 주요 구조: [설명]Phase 2: 구현
frontend-developer 에이전트를 호출하여 구현합니다.
구현 순서
- CSS 변수 (globals.css)
- 유틸리티 (lib/utils.ts)
- UI 컴포넌트 (components/ui/)
- 레이아웃 (components/layout/)
- 기능 컴포넌트
- 페이지 조립
- 애니메이션
필수 의존성
npm install tailwindcss @tailwindcss/typography
npm install clsx tailwind-merge
npm install framer-motion
npm install lucide-react
npx shadcn@latest initPhase 3: 검증
구현 완료 후:
- TypeScript 에러 없음
- 빌드 성공
- 반응형 확인
- 접근성 확인
사용 예시
/frontend 로그인 페이지 만들어줘. Vercel 스타일로, 이메일/비밀번호 입력 폼과 소셜 로그인 버튼 포함./frontend 대시보드 만들어줘. Stripe 스타일로, 사이드바 + 메인 콘텐츠 영역 + 차트 카드들.