Application design skill for AI agents
Overview
The Application design skill is a comprehensive, implementation-ready design system guideline built for AI agents. It encodes the entire visual identity, component specifications, and interaction standards of a modern application dashboard into a single SKILL.md file that any AI coding assistant can follow.
Application is a Vercel/GitHub-inspired dashboard design built for clarity, speed, and developer-first workflows. The interface focuses on simplicity and visual hierarchy, allowing teams to monitor, deploy, and manage applications effortlessly from a single control center. It features a top-bar only navigation with no sidebar, a clean purple-themed aesthetic, glass-like panels, and card-based layouts. Every rule in this skill file is anchored to a concrete token, threshold, or example — no ambiguous adjectives.
Style foundations
The Application design system is built on a modern, clean, high-contrast visual style with carefully defined foundations.
Typography
The system uses Inter as both the primary body and display font, delivering the sharp, geometric precision expected in developer tooling. JetBrains Mono is used for code and monospaced elements. The scale follows a progression of 12 / 14 / 16 / 20 / 24 / 32 pixels, and all nine font weights (100–900) are available for precise typographic control.
Color palette
| Token | Hex | Usage |
|---|---|---|
| Primary | #9333EA |
Primary actions, navigation accents, and key UI elements |
| Secondary | #A855F7 |
Hover states, lighter accents, and complementary highlights |
| Success | #10B981 |
Positive states, deploy indicators, and confirmations |
| Warning | #F59E0B |
Cautionary states and threshold alerts |
| Danger | #EF4444 |
Error states and destructive actions |
| Surface | #FFFFFF |
Card and page backgrounds |
| Text | #09090B |
Body text, headings, and content |
The system uses semantic tokens across five palettes — primary (purple), neutral, success, warning, and danger — so components reference tokens rather than raw hex values. The vivid purple primary on a white surface with near-black text creates a distinctive, modern developer aesthetic.
Visual treatment and layout
The system uses glass-like panels with soft shadows and rounded components for a polished, contemporary feel. The layout follows a top-bar only navigation pattern with no sidebar — all primary navigation lives in a horizontal header. Content is organized in structured grid layouts with card-based sections for clear visual grouping.
Spacing
All spacing follows a 4 / 8 / 12 / 16 / 24 / 32 pixel scale to maintain a consistent vertical and horizontal rhythm across every component.
Component families
The Application skill covers a wide range of component families, organized into logical groups:
- Inputs and forms — buttons, inputs, textareas, selects/comboboxes, checkboxes, radios, switches, date/time pickers, file uploaders
- Data display — cards, tables, data lists, data grids, charts, stats/metrics, badges/chips, avatars
- Navigation — breadcrumbs, pagination, steppers, sidebars, top bars/headers, tabs, command palette
- Overlays — modals, drawers/sheets, tooltips, popovers/menus
- Feedback — alerts/toasts, notifications center, progress indicators, skeletons, empty states
- Pages — authentication screens, settings pages, onboarding, documentation layouts, pricing blocks, search
- Visualization — data visualization wrappers, carousels, accordions
Each component family includes defined states (default, hover, focus-visible, active, disabled, loading, error), interaction behavior for keyboard, pointer, and touch, explicit token usage, and responsive behavior with edge cases.
Accessibility
This skill targets WCAG 2.2 AA compliance with keyboard-first interactions and visible focus states. Every accessibility statement in the file is testable in implementation. When conflicts arise between aesthetics and accessibility, accessibility wins.
How to use this skill with AI agents
Pull the skill file into your project with a single command:
npx typeui.sh pull application
This saves the SKILL.md file directly into your project. The skill file is a structured markdown document that tells any AI agent exactly how to build interfaces following the Application design system — which colors to use, how typography should scale, what states every component needs, and how layout and spacing should behave.
Once the file is in your project, you can use it with any AI coding tool — Claude, ChatGPT, Cursor, Windsurf, Copilot, or any other agent that accepts context files, system prompts, or knowledge documents. Copy it into a project knowledge base, reference it as context in a prompt, upload it as a knowledge file, or drop it into a rules directory. The structured format ensures consistent results regardless of which AI platform you use.
Design principles
The Application skill enforces three core rules:
- Prefer semantic tokens over raw values — always reference design tokens instead of hardcoded colors, sizes, or spacing
- Preserve visual hierarchy — maintain clear distinctions between headings, body text, and supporting elements
- Keep interaction states explicit — every interactive element must define its full state set
And three strict anti-patterns to avoid:
- No low contrast text — all text must meet WCAG AA contrast ratios
- No inconsistent spacing rhythm — every measurement must align to the spacing scale
- No ambiguous labels — interactive elements must have clear, descriptive labels
Writing tone
All content generated with this skill follows a concise, confident, and helpful tone. Labels are clear. Instructions are direct. There is no unnecessary jargon or decoration.