메뉴
Export the current design system as a Tailwind CSS configuration. Generates theme.extend with colors, fonts, spacing, shadows, and custom screens.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Full accessibility audit covering focus management, semantic HTML, ARIA attributes, color contrast, touch targets, screen reader experience, and motion safety.
Auto-fix detectable accessibility issues. Adds focus styles, semantic HTML, ARIA attributes, and touch target sizing.
Verify visual alignment across sections. Check that headings, text, images, and components share consistent alignment points.
Add purposeful motion and transitions to the interface. Focuses on high-impact moments: page load reveals, hover states, and scroll-triggered entries. Not decorative jitter.
Audit and fix ARIA attributes. Ensures proper aria-label, aria-hidden, aria-live, and role usage throughout the interface.
Comprehensive design quality audit with severity ratings, specific line references, and actionable fix instructions. Deeper than /score — examines every declaration.
| name | export-tailwind |
| description | Export the current design system as a Tailwind CSS configuration. Generates theme.extend with colors, fonts, spacing, shadows, and custom screens. |
| user-invokable | true |
Generate a tailwind.config.js theme extension:
module.exports = {
theme: {
extend: {
colors: { /* full palette + semantic */ },
fontFamily: { display: [...], body: [...], mono: [...] },
fontSize: { /* type scale */ },
spacing: { /* spacing scale */ },
boxShadow: { /* elevation system */ },
borderRadius: { /* radius scale */ },
screens: { /* breakpoints */ }
}
}
}
Include all computed values, not references to other tokens.