본문으로 건너뛰기
cccskills
무료GitHub에 공개

frontend-development

Use this skill for ANY work involving React, Next.js, TypeScript, or Tailwind in the browser layer. This includes building components and pages, but equally covers debugging and fixing frontend issues: CSS/Tailwind classes not applying, form validation behavior, hydration mismatches between server and client renders, styling bugs, layout shifts, and rendering problems. Also use for refactoring components (e.g., splitting Server vs Client Components), data fetching patterns, state management, bundle optimization, and frontend tooling. If the problem involves what users see or interact with in a web browser — whether building, fixing, or refactoring — use this skill. Not for backend APIs, databases, infrastructure, or DevOps.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

설치 방법 보기

포함된 파일(17)

  • SKILL.md5.0 KB
  • references/biome.md5.4 KB
  • references/conventions.md2.2 KB
  • references/data-fetching/axios.md2.0 KB
  • references/data-fetching/overview.md437 B
  • references/data-fetching/tanstack.md3.3 KB
  • references/data-fetching/trpc-tanstack.md2.0 KB
  • references/nextjs/file-structure.md2.2 KB
  • references/nextjs/overview.md348 B
  • references/nextjs/patterns.md2.2 KB
  • references/react/file-structure.md2.8 KB
  • references/react/overview.md436 B
  • references/react/patterns.md3.6 KB
  • references/react/state.md1.7 KB
  • references/shadcn.md2.0 KB
  • references/tailwind.md1.1 KB
  • references/typescript.md1.9 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Frontend Development

Project-specific patterns for React/Next.js/TypeScript frontend work.

Architecture Decisions

Server-First Boundaries

Start with Server Components. Only add 'use client' when you need interactivity, state, or browser APIs. Extract only the interactive leaf — not the entire page or section.

Colocation Over Centralization

Types, hooks, and utilities that serve one feature live in that feature's directory. Only truly shared code goes in global directories.

Composition Over Customization

Compose existing components rather than adding props/variants. shadcn/ui components are meant to be copied and modified. Build up from primitives.

Data Flows Down, Events Flow Up

Server fetches data and passes it as props. Client components handle interactions and call server actions. Never fetch in client components what could be fetched on the server.

Gotchas

  • 'use client' does NOT mean "runs only in the browser" — it runs on the server during SSR too. It means "include in the client bundle." Putting secrets or DB calls in a 'use client' file will leak them.
  • Importing a Server Component into a Client Component makes it a Client Component. The boundary propagates DOWN. Pass server content as children props instead.
  • useEffect with empty deps fires AFTER paint — use useLayoutEffect for DOM measurements that affect layout, but never in Server Components.
  • Next.js fetch() caches by default in App Router. Add { cache: 'no-store' } or revalidate: 0 for data that must be fresh. Forgetting this causes stale data bugs that only appear in production.
  • Tailwind classes are purged at build time — dynamically constructed class names like bg-${color}-500 will be missing. Use complete class names or safelist them.
  • key prop on mapped elements must be stable and unique. Using array index as key causes subtle bugs when list items are reordered, inserted, or deleted.
  • useSearchParams() requires a <Suspense> boundary in Next.js App Router or the entire page becomes client-rendered.
  • shadcn/ui components are source code, not a library. After npx shadcn-ui add, the component lives in YOUR codebase — modify it directly, don't wrap it.
  • React Hook Form's register() returns a ref — don't also pass your own ref to the same input without merging them.
  • async Server Components that throw redirect() or notFound() must NOT be wrapped in try/catch — these work by throwing special errors that Next.js catches upstream.

Quick Start

  1. Check file structure — App Router or plain React? Check references below.
  2. Identify the feature boundary — What feature does this work belong to?
  3. Start with Server Component — Only add 'use client' when you hit a wall
  4. Name files specifically — login-form.tsx not form.tsx. Must be grep-findable.
  5. Match existing patterns — Read 2-3 similar files before creating new ones

References

When you need...Read
File naming, imports, exportsconventions.md
Next.js App Router patternsoverview.md
React component patternsoverview.md
TypeScript project patternstypescript.md
shadcn/ui + Dice UI usageshadcn.md
Tailwind configurationtailwind.md
Data fetching (tRPC, TanStack, axios)overview.md
Biome/linter configbiome.md

Official Resources

For general framework docs beyond project-specific patterns, consult:

FrameworkURL
Next.jshttps://nextjs.org/docs
Reacthttps://react.dev
TypeScripthttps://www.typescriptlang.org/docs
Tailwind CSShttps://tailwindcss.com/docs
shadcn/uihttps://ui.shadcn.com/docs
Dice UIhttps://www.diceui.com/docs
TanStack Queryhttps://tanstack.com/query/latest/docs
tRPChttps://trpc.io/docs
Zustandhttps://zustand.docs.pmnd.rs
React Hook Formhttps://react-hook-form.com
Zodhttps://zod.dev
Biomehttps://biomejs.dev
nuqshttps://nuqs.47ng.com

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

avibebuilder/claude-prime1192026년 5월 17일 업데이트

ask

무료

Answer questions about code, architecture, and technical decisions — no implementation. Trigger on questions asking 'why', 'what does this do', 'what is the purpose of', 'explain', 'what's the difference', 'compare', or 'what are the tradeoffs' — even when referencing specific files, code snippets, or inline code. The key signal is the user wants to UNDERSTAND something, not change it. Do NOT trigger for requests to build, fix, plan, review, research, or add/modify code.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

avibebuilder/claude-prime1192026년 5월 17일 업데이트

Use this skill for any Python backend work in this project: building FastAPI endpoints, writing service functions, defining Pydantic/SQLModel schemas, running Alembic migrations, or debugging 422 errors. Essential for authentication and authorization patterns — setting up get_current_user, is_superuser checks, admin-only guards, role-based access, and dependency injection chains like Depends(). Also covers middleware, background tasks, async SQLAlchemy sessions, ORM relationship loading, and request/response design. Activate whenever the question involves Python API code, FastAPI patterns, or backend architecture in this codebase. Not for frontend, Docker, CI/CD, or infrastructure.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

avibebuilder/claude-prime1192026년 5월 17일 업데이트

cook

무료

Implement, build, create, or add any feature, endpoint, page, component, or functionality. Use this skill whenever the user asks you to write new code or make code changes — whether it's adding an API endpoint, building a UI page, creating an export feature, wiring up a webhook, implementing a search/filter, or any other hands-on coding task. This is the default skill for all 'build this', 'add this', 'create this', 'wire up', 'implement' requests. Covers the full cycle: clarify requirements, plan if needed, write code, verify, and review. Do NOT use for pure research, debugging, documentation, or explanation — only when the user wants working code delivered.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

avibebuilder/claude-prime1192026년 5월 17일 업데이트

Use when the user wants to save knowledge as a file so others don't have to rediscover it — "turn this into a doc", "write this up", "document how X works", "we figured this out and want to capture it", "nobody should have to figure this out again". Covers any request to create or update durable written artifacts: onboarding guides, runbooks, ADRs, API docs, architecture notes, postmortems, changelogs, setup guides. The trigger: user wants knowledge captured in a file for future reference, not just a conversation. Do NOT use when still making decisions (→ give-plan), just asking for explanation without a file (→ ask), or writing code (→ cook).

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

avibebuilder/claude-prime1192026년 5월 17일 업데이트

diagnose

무료

Investigate unexpected behavior and mysterious bugs. Use when the cause of a problem is unknown and the user needs to understand WHY something is happening — symptoms like: sudden unexplained changes in metrics or behavior, works locally but not in staging/production, inconsistent or intermittent failures, correct code producing wrong results, operations succeeding but having no effect, environment-specific failures, duplicate executions, stale data, or any "why did this change?" or "why is this happening?" situation. Covers infrastructure anomalies (cache hit rates dropping, latency spikes, queue behavior shifts) as well as code bugs. The key signal is confusion about root cause, not a request to implement a known fix. Do NOT use for feature requests, known fixes, planning, or documentation tasks.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

avibebuilder/claude-prime1192026년 5월 17일 업데이트

avibebuilder의 스킬 모두 보기

이 스킬의 문제 신고