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 this skill
This skill guides creation of new UI components and pages for c12z.io — a personal blog/portfolio with a retro-digital, dark-first aesthetic. All output must integrate with the existing design system without breaking visual coherence.
Project Context
Stack: Astro 6 + React 19 + TailwindCSS v4 (Vite plugin) + MDX. Deployed on Vercel (static output).
File conventions:
- Use
.astrocomponents by default — only.tsxwhen interactivity is required - Feature-scoped styles go in
src/features/<name>/styles/*.module.css - Tailwind utilities for layout/spacing; CSS Modules for component-level styles
- Animations in React components use the Motion library (
motion/react) - Path aliases:
@/*→src/*,@/common/*→src/components/common/*,@/ui/*→src/components/ui/*,@/features/*→src/features/*
Design System — ALWAYS follow this
All tokens are CSS variables in src/styles/global.css. Never hardcode colors.
Palette
Dark mode (default):
--color-bg#111|--color-surface#1a1a1a|--color-surface-alt#2e2e2e--color-border#242424- Text:
--color-text-header#fcf8f1|--color-text#dfdbd5|--color-text-relaxed#9d9b98 - Accents:
--color-primary#ff2f92(hot pink) |--color-secondary#904fe7(purple)
Light mode:
--color-bg#f5f2ee|--color-surface#eae6e1|--color-surface-alt#cfcac3- Text:
--color-text-header#0c0c0b|--color-text#1f1e1d|--color-text-relaxed#595856
Content-type accent colors (dark / light):
| Section | Dark | Light |
|---|---|---|
| Behavior | #e22ef6 | #80008e |
| Essays | #33ffe8 | #016c60 |
| Library | #ffa424 | #a15e00 |
| Projects | #ff3838 | #2e5100 |
Bias category colors: Speed #e03d3d · Memory #af76ff · Judgment #4c9dff · Context #9ed841 · Perception #f2ce57
Typography
| Role | Font | Tailwind class |
|---|---|---|
| Headers / display | Tamago (pixel art) | font-pixel tracking-widest |
| Body | Rubik (300–700) | font-rubik |
| Code | Cascadia | font-mono |
Recurring visual motifs
- Left/bottom border with
rounded-blon list items - Hot-pink underline decoration on links (
decoration-primary) - WIP sections: red-border box + 🚧 badge using
border-error - Muted uppercase labels with
tracking-widestbefore section titles
Design Thinking for this project
Before generating any component:
- Aesthetic anchor — stay within the retro-digital, dark-first direction. The pixel font + hot-pink is the identity. Don't dilute it.
- Component role — is it informational, navigational, or interactive? Match the complexity of the implementation to the role.
- Motion — one well-orchestrated entrance animation beats scattered micro-interactions. Use
animation-delayfor staggered reveals. - Spatial composition — generous negative space, asymmetry where appropriate, grid-breaking accents with the pink/purple.
What NOT to do
- Don't import new fonts — use Tamago, Rubik, Cascadia (already loaded globally)
- Don't use generic color names like
gray-500directly — map to CSS variables - Don't create a
tailwind.config.js— the project uses CSS variable-based theming - Don't use
.tsxfor purely presentational components - Don't add
console.logor debug artifacts
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 | 3mo | No flags | Intermediate |
| ui-styling | 12 | 9mo | Review | Beginner |
| figma | 22 | 4mo | No flags | Intermediate |
| interaction-design | 15 | 5mo | 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.