메뉴
Documentation for web libraries including shadcn/ui, React Router, React Query, Framer Motion, and more. Read docs before working with these libraries and when stuck on problems.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
How to use AI APIs like OpenAI, ChatGPT, Elevenlabs, etc. When a user asks you to make an app that requires an AI API, use this skill to understand how to use the API or how to respond to the user.
Set up SQLite database with Prisma ORM and Better Auth for user authentication. Use when the user asks for a full backend, database and auth, or needs needs user accounts, login/signup, or persistent data storage.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
How to use AI APIs like OpenAI, ChatGPT, Elevenlabs, etc. When a user asks you to make an app that requires an AI API, use this skill to understand how to use the API or how to respond to the user.
Create distinctive, production-grade web interfaces using React, Tailwind, and shadcn/ui. Use when building pages, components, or styling any web UI.
SOC 직업 분류 기준
| name | web-docs |
| description | Documentation for web libraries including shadcn/ui, React Router, React Query, Framer Motion, and more. Read docs before working with these libraries and when stuck on problems. |
file: shadcn-ui.md name: shadcn/ui Components description: Pre-built, accessible React components built on Radix UI and Tailwind CSS. All components are in src/components/ui/.
file: react-router.md name: React Router v6 description: Declarative routing for React applications. Used for page navigation and URL handling.
file: react-query.md name: React Query (TanStack Query) description: Powerful data fetching and caching library for React. Use for all server state management.
file: framer-motion.md name: Framer Motion description: Production-ready animation library for React. Use for complex animations and page transitions.
file: react-hook-form.md name: React Hook Form description: Performant form library with easy validation. Use with zod for schema validation.
file: tailwind.md name: Tailwind CSS description: Utility-first CSS framework. All styling in this project uses Tailwind classes.
file: recharts.md name: Recharts description: Charting library built on D3. Use for data visualization and charts.
