SkillsAdd

jh941213/codex-lattice · Archived

frontend

? 트리거: "프론트엔드", "UI 만들어", "페이지 만들어", "컴포넌트 만들어", "랜딩 페이지", "대시보드 UI" 안티-트리거: "백엔드 API", "데이터베이스", "CLI 도구"

First seen Aug 25, 2026

Installation

$ npx skills add jh941213/codex-lattice --skill frontend
View on skills.sh ↗ GitHub repository ↗
Feature your product here Skill page unit · reach builders installing agent skills View pricing →

Summary

  • 빅테크 스타일(Stripe, Vercel, Apple) UI 개발. 플래닝 → 구현까지 한 번에.
  • 트리거: "프론트엔드", "UI 만들어", "페이지 만들어", "컴포넌트 만들어", "랜딩 페이지", "대시보드 UI"
  • 안티-트리거: "백엔드 API", "데이터베이스", "CLI 도구"

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 installs

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

agent-browser Same topic
vercel-labs/agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, includ…

11.9K installs
frontend-design Same topic
anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existi…

4.3K installs
web-design-guidelines Same topic
vercel-labs/agent-skills

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "chec…

4.7K installs
microsoft-foundry Same topic
microsoft/azure-skills

Build, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and …

1.7K installs
azure-diagnostics Same topic
microsoft/azure-skills

Debug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe …

1.6K installs
azure-deploy Same topic
microsoft/azure-skills

Execute Azure deployments for ALREADY-PREPARED applications that have existing .azure/deploymen…

1.5K installs

Also in this package

Other skills from jh941213/codex-lattice · top by installs.

npx skills add jh941213/codex-lattice
fastapi-templates 1 harness-diagnostics 1 release-readiness 1 api-design-principles 1 nano-banana 1 spec-verify 1 codex-image 1 stitch-design-md 1 review 1 spec 1

Browse all from 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 toolsRead, Write, Edit, Bash, Glob, Grep

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 2,578 B
  • docs SUMMARY.md 310 B

History

  1. First seen on skills.sh
  2. 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 에이전트를 호출하여 구현합니다.

구현 순서

  1. CSS 변수 (globals.css)
  2. 유틸리티 (lib/utils.ts)
  3. UI 컴포넌트 (components/ui/)
  4. 레이아웃 (components/layout/)
  5. 기능 컴포넌트
  6. 페이지 조립
  7. 애니메이션

필수 의존성

npm install tailwindcss @tailwindcss/typography
npm install clsx tailwind-merge
npm install framer-motion
npm install lucide-react
npx shadcn@latest init

Phase 3: 검증

구현 완료 후:

  • TypeScript 에러 없음
  • 빌드 성공
  • 반응형 확인
  • 접근성 확인

사용 예시

/frontend 로그인 페이지 만들어줘. Vercel 스타일로, 이메일/비밀번호 입력 폼과 소셜 로그인 버튼 포함.
/frontend 대시보드 만들어줘. Stripe 스타일로, 사이드바 + 메인 콘텐츠 영역 + 차트 카드들.