메뉴
Use when building or refactoring functional React/Vite/Tailwind UI pages, templates, or component libraries that need consistent structure, tokenized styling, accessibility checks, and performance-ready patterns.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
Use VibeUsage to track AI coding agent token usage, inspect model and project usage, and find scoped API documentation.
Use this skill whenever the user needs backend infrastructure management — creating database tables, running SQL, managing database migration files, deploying serverless functions, managing storage buckets, deploying frontend apps, adding secrets, setting up cron jobs, checking logs, or running backend diagnostics — especially if the project uses InsForge. Trigger on any of these contexts: creating or altering database tables/schemas, fetching or applying database migrations, writing RLS policies via SQL, deploying or invoking edge functions, creating storage buckets, deploying frontends to hosting, managing secrets/env vars, setting up scheduled tasks/cron, viewing backend logs, diagnosing backend health or performance issues, or exporting/importing database backups. If the user asks for these operations generically (e.g., "create a users table", "apply a migration", "deploy my app", "set up a cron job", "check backend health") and you're unsure whether they use InsForge, consult this skill and ask. For writ
Use this skill whenever writing frontend code that talks to a backend for database queries, authentication, file uploads, AI features, real-time messaging, edge function calls, or sending custom transactional email — especially if the project uses InsForge or @insforge/sdk. Trigger on any of these contexts: querying/inserting/updating/deleting database rows from frontend code, adding login/signup/OAuth/password-reset flows, uploading or downloading files to storage, invoking serverless functions, calling AI chat completions or image generation, subscribing to real-time WebSocket channels, sending welcome/newsletter/notification emails via insforge.emails.send, or writing RLS policies. If the user asks for these features generically (e.g., "add auth to my React app", "fetch data from my database", "upload files", "send a welcome email") and you're unsure whether they use InsForge, consult this skill and ask. For backend infrastructure (creating tables via SQL, deploying functions, CLI commands), use insforge-c
Use this skill to generate well-branded interfaces and assets for VibeUsage, either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
Use when designing or reviewing a backend MVP with tight budget, evolving schema, and reliance on third-party backends where idempotency, replay, and responsibility attribution are high-risk.
Use when managing Codex review iterations for a PR and you must enforce preflight risk-layer checks and post-merge learning capture.
SOC 직업 분류 기준
| name | frontend-ui-functional |
| description | Use when building or refactoring functional React/Vite/Tailwind UI pages, templates, or component libraries that need consistent structure, tokenized styling, accessibility checks, and performance-ready patterns. |
Provide a lightweight, repeatable workflow for functional React/Vite/Tailwind UI using structure, tokens, accessibility, and performance-ready patterns plus reusable snippets.
If the repo contains docs/skills/frontend-ui-functional/project-overlay.md, read and apply it before starting. Project-specific rules override this skill.
frontend-design skill).docs/skills/frontend-ui-functional/project-overlay.md (if present)references/atomic-design.mdreferences/styling-tokens.mdreferences/a11y-checklist.mdreferences/perf-and-state.mdreferences/tooling.mdIf time is tight, do a thin pass of each step rather than skipping a11y/perf.
| Need | Use |
|---|---|
| Project overlay | docs/skills/frontend-ui-functional/project-overlay.md (if present) |
| Structure system | references/atomic-design.md |
| Tokenized styling | references/styling-tokens.md |
| Accessibility/a11y | references/a11y-checklist.md |
| Performance + state | references/perf-and-state.md |
| QA tooling | references/tooling.md |
| Reusable UI snippets | assets/snippets/* |
assets/snippets/button.tsxassets/snippets/card.tsxassets/snippets/form.tsxassets/snippets/layout.tsxassets/snippets/lazy-route.tsxassets/snippets/zustand-store.tsNote: replace literal strings with your project's copy/content source when applicable.
import { Button } from "./button";
import { Card } from "./card";
import { PageLayout } from "./layout";
export function DashboardStub() {
return (
<PageLayout title="Overview" actions={<Button label="Create" />}>
<div className="grid gap-4 md:grid-cols-2">
<Card title="Revenue" description="Last 30 days">
<div className="text-2xl font-semibold text-primary">$128,400</div>
</Card>
<Card title="Active Users" description="Daily active">
<div className="text-2xl font-semibold text-primary">4,812</div>
</Card>
</div>
</PageLayout>
);
}
references/styling-tokens.md.