frontend-design
Creates UI components for c12z.io following a retro-digital, dark-first aesthetic.
Install
mkdir -p .claude/skills/frontend-design-akac12z && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/14642" && unzip -o skill.zip -d .claude/skills/frontend-design-akac12z && rm skill.zipInstalls to .claude/skills/frontend-design-akac12z
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Create distinctive, production-grade frontend interfaces for c12z.io. Adapted to the project's retro-digital aesthetic, design tokens, and Astro + React stack.Key capabilities
- →Create new UI components for c12z.io
- →Create new pages for c12z.io
- →Integrate with existing design system
- →Use Astro 6 + React 19 + TailwindCSS v4 stack
- →Apply retro-digital, dark-first aesthetic
- →Utilize CSS variables for design tokens
How it works
The skill guides the creation of UI components and pages by adhering to the project's stack, file conventions, and a strict design system based on CSS variables for colors and specific fonts for typography.
Inputs & outputs
When to use frontend-design
- →Building new blog components
- →Updating portfolio UI
- →Applying retro-digital styling
About frontend-design
Guides the creation of components using Astro and React. Enforces strict design-system compliance using predefined CSS variables for the retro theme.
Create distinctive, production-grade frontend interfaces for c12z.io. Adapted to the project's retro-digital aesthetic, design tokens, and Astro + React stack.
When not to use it
- →When creating components for projects other than c12z.io
- →When the project does not use Astro + React + TailwindCSS
- →When the design aesthetic is not retro-digital or dark-first
Limitations
- →The skill is specific to the c12z.io project
- →It requires adherence to a predefined design system and aesthetic
- →It prohibits importing new fonts
How it compares
This skill ensures visual coherence and adherence to a specific retro-digital aesthetic and design system, unlike generic frontend development.
Compared to similar skills
frontend-design side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| frontend-design (this skill) | 0 | 5mo | No flags | Intermediate |
| ui-styling | 12 | 10mo | Review | Beginner |
| figma | 22 | 6mo | No flags | Intermediate |
| interaction-design | 15 | 6mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
ui-styling
mrgoonie
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
figma
openai
Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.
interaction-design
wshobson
Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences.
web-design-reviewer
github
This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.
visual-design-foundations
wshobson
Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or improving visual hierarchy and consistency.
design-lab
0xdesign
Conduct design interviews, generate five distinct UI variations in a temporary design lab, collect feedback, and produce implementation plans. Use when the user wants to explore UI design options, redesign existing components, or create new UI with multiple approaches to compare.