Userinterface Wiki
raphaelsalaja/userinterface-wiki
UI/UX best practices for web interfaces. An agent skill from raphaelsalaja/userinterface-wiki.
Design thinking and decision-making for web UI. An agent skill from xenitV1/Antigravity-Workflows.
Install Frontend Design
$ npx skills add xenitV1/Antigravity-Workflows --skill frontend-design -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install xenitV1/Antigravity-Workflows frontend-design --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/xenitV1/Antigravity-Workflows.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/frontend-design .claude/skills/frontend-design && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "frontend-design" agent skill from https://github.com/xenitV1/Antigravity-Workflows/tree/main/skills/frontend-design into .claude/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/xenitV1/Antigravity-Workflows/tree/main/skills/frontend-designType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add xenitV1/Antigravity-Workflows --skill frontend-design -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install xenitV1/Antigravity-Workflows frontend-design --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/xenitV1/Antigravity-Workflows.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/frontend-design .agents/skills/frontend-design && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "frontend-design" agent skill from https://github.com/xenitV1/Antigravity-Workflows/tree/main/skills/frontend-design into .agents/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add xenitV1/Antigravity-Workflows --skill frontend-design -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install xenitV1/Antigravity-Workflows frontend-design --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/xenitV1/Antigravity-Workflows.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/frontend-design .cursor/skills/frontend-design && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "frontend-design" agent skill from https://github.com/xenitV1/Antigravity-Workflows/tree/main/skills/frontend-design into .cursor/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/xenitV1/Antigravity-Workflows.git --path skills/frontend-design--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add xenitV1/Antigravity-Workflows --skill frontend-design -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install xenitV1/Antigravity-Workflows frontend-design --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/xenitV1/Antigravity-Workflows.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/frontend-design .gemini/skills/frontend-design && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "frontend-design" agent skill from https://github.com/xenitV1/Antigravity-Workflows/tree/main/skills/frontend-design into .gemini/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install xenitV1/Antigravity-Workflows frontend-designInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add xenitV1/Antigravity-Workflows --skill frontend-design -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/xenitV1/Antigravity-Workflows.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/frontend-design .github/skills/frontend-design && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "frontend-design" agent skill from https://github.com/xenitV1/Antigravity-Workflows/tree/main/skills/frontend-design into .github/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add xenitV1/Antigravity-Workflows --skill frontend-design -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install xenitV1/Antigravity-Workflows frontend-design --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/xenitV1/Antigravity-Workflows.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/frontend-design .opencode/skills/frontend-design && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "frontend-design" agent skill from https://github.com/xenitV1/Antigravity-Workflows/tree/main/skills/frontend-design into .opencode/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
frontend-design- GitHub stars
- 130
- Token cost
- ~2.9k tokens
- SKILL.md length
- 908 words
- Files
- 10 (incl. scripts)
- Skills in repo
- 42
- Repo updated
- First seen
- Licence
- MIT
At a glance
Design thinking and decision-making for web UI. An agent skill from xenitV1/Antigravity-Workflows.
- Works in 10 steps: Constraint Analysis (ALWAYS FIRST) → UX Psychology Principles → Layout Principles → …
- Designing components
- SKILL.md covers 🎯 Selective Reading Rule…, 🔧 Runtime Scripts, ⚠️ CRITICAL: ASK BEFORE… and 1. Constraint Analysis (ALWAYS…, plus 6 more sections
- Runs Python scripts from its folder; calls python
What it does
Frontend Design is an agent skill from xenitV1/Antigravity-Workflows. Design thinking and decision-making for web UI. Use when designing components, layouts, color schemes, typography, or creating aesthetic interfaces. Teaches principles, not fixed values.
Its SKILL.md is about 2.9k tokens, which your agent loads only when the skill is triggered. The skill folder holds 10 other files, including scripts (for example `animation-guide.md`, `color-system.md` and `decision-trees.md`).
It sits in Frontend & Design, covering Typography and Frontend development. The licence is MIT.
When your agent uses it
- Designing components
- Creating aesthetic interfaces
Example prompts
- “/frontend-design”
Requirements
- Python 3
- Pre-approved tools (allowed-tools): Read, Write, Edit, Glob, Grep, Bash
Workflow steps
10 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit f0a1fa7. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves these tools, so the agent can use them without asking each time:
ReadWriteEditGlobGrepBash
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 2 files in scripts/ (Python), which the agent can run.
Shell commands in SKILL.md call:
python
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Frontend Design loads about 2.9k tokens when it runs. Until then it costs about 51 tokens; SKILL.md has 908 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check: notes
The automated check noted patterns worth knowing about, such as sudo or a known installer.
- NotePre-approves every shell command (allowed-tools: Bash)SKILL.md
allowed-tools: Read, Write, Edit, Glob, Grep, Bash
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
The full file from xenitV1/Antigravity-Workflows at commit f0a1fa7, republished under its MIT licence (© xenitV1). 908 words, ~2,862 tokens.
Download SKILL.mdSave it as
.claude/skills/frontend-design/SKILL.md (or your agent's skills folder). This skill also uses 9 other files; get the full folder from GitHub.- name
- frontend-design
- description
- Design thinking and decision-making for web UI. Use when designing components, layouts, color schemes, typography, or creating aesthetic interfaces. Teaches principles, not fixed values.
- allowed-tools
- Read, Write, Edit, Glob, Grep, Bash
Frontend Design System
Philosophy: Every pixel has purpose. Restraint is luxury. User psychology drives decisions. Core Principle: THINK, don't memorize. ASK, don't assume.
🎯 Selective Reading Rule (MANDATORY)
Read REQUIRED files always, OPTIONAL only when needed:
| File | Status | When to Read |
|---|---|---|
| ux-psychology.md | 🔴 REQUIRED | Always read first! |
| color-system.md | ⚪ Optional | Color/palette decisions |
| typography-system.md | ⚪ Optional | Font selection/pairing |
| visual-effects.md | ⚪ Optional | Glassmorphism, shadows, gradients |
| animation-guide.md | ⚪ Optional | Animation needed |
| motion-graphics.md | ⚪ Optional | Lottie, GSAP, 3D |
| decision-trees.md | ⚪ Optional | Context templates |
🔴 ux-psychology.md = ALWAYS READ. Others = only if relevant.
🔧 Runtime Scripts
Execute these for audits (don't read, just run):
| Script | Purpose | Usage |
|---|---|---|
scripts/ux_audit.py | UX Psychology & Accessibility Audit | python scripts/ux_audit.py <project_path> |
⚠️ CRITICAL: ASK BEFORE ASSUMING (MANDATORY)
STOP! If the user's request is open-ended, DO NOT default to your favorites.
When User Prompt is Vague, ASK:
Color not specified? Ask:
"What color palette do you prefer? (blue/green/orange/neutral/other?)"
Style not specified? Ask:
"What style are you going for? (minimal/bold/retro/futuristic/organic?)"
Layout not specified? Ask:
"Do you have a layout preference? (single column/grid/asymmetric/full-width?)"
⛔ DEFAULT TENDENCIES TO AVOID (ANTI-SAFE HARBOR):
| AI Default Tendency | Why It's Bad | Think Instead |
|---|---|---|
| Bento Grids (Modern Cliché) | Used in every AI design | Why does this content NEED a grid? |
| Hero Split (Left/Right) | Predictable & Boring | How about Massive Typography or Vertical Narrative? |
| Mesh/Aurora Gradients | The "new" lazy background | What's a radical color pairing? |
| Glassmorphism | AI's idea of "premium" | How about solid, high-contrast flat? |
| Deep Cyan / Fintech Blue | Safe harbor from purple ban | Why not Red, Black, or Neon Green? |
| "Orchestrate / Empower" | AI-generated copywriting | How would a human say this? |
| Dark background + neon glow | Overused, "AI look" | What does the BRAND actually need? |
| Rounded everything | Generic/Safe | Where can I use sharp, brutalist edges? |
🔴 "Every 'safe' structure you choose brings you one step closer to a generic template. TAKE RISKS."
1. Constraint Analysis (ALWAYS FIRST)
Before any design work, ANSWER THESE or ASK USER:
| Constraint | Question | Why It Matters |
|---|---|---|
| Timeline | How much time? | Determines complexity |
| Content | Ready or placeholder? | Affects layout flexibility |
| Brand | Existing guidelines? | May dictate colors/fonts |
| Tech | What stack? | Affects capabilities |
| Audience | Who exactly? | Drives all visual decisions |
Audience → Design Approach
| Audience | Think About |
|---|---|
| Gen Z | Bold, fast, mobile-first, authentic |
| Millennials | Clean, minimal, value-driven |
| Gen X | Familiar, trustworthy, clear |
| Boomers | Readable, high contrast, simple |
| B2B | Professional, data-focused, trust |
| Luxury | Restrained elegance, whitespace |
2. UX Psychology Principles
Core Laws (Internalize These)
| Law | Principle | Application |
|---|---|---|
| Hick's Law | More choices = slower decisions | Limit options, use progressive disclosure |
| Fitts' Law | Bigger + closer = easier to click | Size CTAs appropriately |
| Miller's Law | ~7 items in working memory | Chunk content into groups |
| Von Restorff | Different = memorable | Make CTAs visually distinct |
| Serial Position | First/last remembered most | Key info at start/end |
Emotional Design Levels
VISCERAL (instant) → First impression: colors, imagery, overall feel
BEHAVIORAL (use) → Using it: speed, feedback, efficiency
REFLECTIVE (memory) → After: "I like what this says about me"Trust Building
- Security indicators on sensitive actions
- Social proof where relevant
- Clear contact/support access
- Consistent, professional design
- Transparent policies
3. Layout Principles
Golden Ratio (φ = 1.618)
Use for proportional harmony:
├── Content : Sidebar = roughly 62% : 38%
├── Each heading size = previous × 1.618 (for dramatic scale)
├── Spacing can follow: sm → md → lg (each × 1.618)8-Point Grid Concept
All spacing and sizing in multiples of 8:
├── Tight: 4px (half-step for micro)
├── Small: 8px
├── Medium: 16px
├── Large: 24px, 32px
├── XL: 48px, 64px, 80px
└── Adjust based on content densityKey Sizing Principles
| Element | Consideration |
|---|---|
| Touch targets | Minimum comfortable tap size |
| Buttons | Height based on importance hierarchy |
| Inputs | Match button height for alignment |
| Cards | Consistent padding, breathable |
| Reading width | 45-75 characters optimal |
4. Color Principles
60-30-10 Rule
60% → Primary/Background (calm, neutral base)
30% → Secondary (supporting areas)
10% → Accent (CTAs, highlights, attention)Color Psychology (For Decision Making)
| If You Need... | Consider Hues | Avoid |
|---|---|---|
| Trust, calm | Blue family | Aggressive reds |
| Growth, nature | Green family | Industrial grays |
| Energy, urgency | Orange, red | Passive blues |
| Luxury, creativity | Deep Teal, Gold, Emerald | Cheap-feeling brights |
| Clean, minimal | Neutrals | Overwhelming color |
Show full SKILL.md (368 more words)Show less
Selection Process
- What's the industry? (narrows options)
- What's the emotion? (picks primary)
- Light or dark mode? (sets foundation)
- ASK USER if not specified
For detailed color theory: color-system.md
5. Typography Principles
Scale Selection
| Content Type | Scale Ratio | Feel |
|---|---|---|
| Dense UI | 1.125-1.2 | Compact, efficient |
| General web | 1.25 | Balanced (most common) |
| Editorial | 1.333 | Readable, spacious |
| Hero/display | 1.5-1.618 | Dramatic impact |
Pairing Concept
Contrast + Harmony:
├── DIFFERENT enough for hierarchy
├── SIMILAR enough for cohesion
└── Usually: display + neutral, or serif + sansReadability Rules
- Line length: 45-75 characters optimal
- Line height: 1.4-1.6 for body text
- Contrast: Check WCAG requirements
- Size: 16px+ for body on web
For detailed typography: typography-system.md
6. Visual Effects Principles
Glassmorphism (When Appropriate)
Key properties:
├── Semi-transparent background
├── Backdrop blur
├── Subtle border for definition
└── ⚠️ **WARNING:** Standard blue/white glassmorphism is a modern cliché. Use it radically or not at all.Shadow Hierarchy
Elevation concept:
├── Higher elements = larger shadows
├── Y-offset > X-offset (light from above)
├── Multiple layers = more realistic
└── Dark mode: may need glow insteadGradient Usage
Harmonious gradients:
├── Adjacent colors on wheel (analogous)
├── OR same hue, different lightness
├── Avoid harsh complementary pairs
├── 🚫 **NO Mesh/Aurora Gradients** (floating blobs)
└── VARY from project to project radicallyFor complete effects guide: visual-effects.md
7. Animation Principles
Timing Concept
Duration based on:
├── Distance (further = longer)
├── Size (larger = slower)
├── Importance (critical = clear)
└── Context (urgent = fast, luxury = slow)Easing Selection
| Action | Easing | Why |
|---|---|---|
| Entering | Ease-out | Decelerate, settle in |
| Leaving | Ease-in | Accelerate, exit |
| Emphasis | Ease-in-out | Smooth, deliberate |
| Playful | Bounce | Fun, energetic |
Performance
- Animate only transform and opacity
- Respect reduced-motion preference
- Test on low-end devices
For animation patterns: animation-guide.md, for advanced: motion-graphics.md
8. "Wow Factor" Checklist
Premium Indicators
- Generous whitespace (luxury = breathing room)
- Subtle depth and dimension
- Smooth, purposeful animations
- Attention to detail (alignment, consistency)
- Cohesive visual rhythm
- Custom elements (not all defaults)
Trust Builders
- Security cues where appropriate
- Social proof / testimonials
- Clear value proposition
- Professional imagery
- Consistent design language
Emotional Triggers
- Hero that evokes intended emotion
- Human elements (faces, stories)
- Progress/achievement indicators
- Moments of delight
9. Anti-Patterns (What NOT to Do)
❌ Lazy Design Indicators
- Default system fonts without consideration
- Stock imagery that doesn't match
- Inconsistent spacing
- Too many competing colors
- Walls of text without hierarchy
- Inaccessible contrast
❌ AI Tendency Patterns (AVOID!)
- Same colors every project
- Dark + neon as default
- Purple/violet everything (PURPLE BAN ✅)
- Bento grids for simple landing pages
- Mesh Gradients & Glow Effects
- Same layout structure / Vercel clone
- Not asking user preferences
❌ Dark Patterns (Unethical)
- Hidden costs
- Fake urgency
- Forced actions
- Deceptive UI
- Confirmshaming
10. Decision Process Summary
For EVERY design task:
1. CONSTRAINTS
└── What's the timeline, brand, tech, audience?
└── If unclear → ASK
2. CONTENT
└── What content exists?
└── What's the hierarchy?
3. STYLE DIRECTION
└── What's appropriate for context?
└── If unclear → ASK (don't default!)
4. EXECUTION
└── Apply principles above
└── Check against anti-patterns
5. REVIEW
└── "Does this serve the user?"
└── "Is this different from my defaults?"
└── "Would I be proud of this?"Reference Files
For deeper guidance on specific areas:
- color-system.md - Color theory and selection process
- typography-system.md - Font pairing and scale decisions
- visual-effects.md - Effects principles and techniques
- animation-guide.md - Motion design principles
- motion-graphics.md - Advanced: Lottie, GSAP, SVG, 3D, Particles
- decision-trees.md - Context-specific templates
- ux-psychology.md - User psychology deep dive
Remember: Design is THINKING, not copying. Every project deserves fresh consideration based on its unique context and users. Avoid the Modern SaaS Safe Harbor!
© xenitV1, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 9 other files (scripts) in skills/frontend-design of xenitV1/Antigravity-Workflows.
- SKILL.md
- animation-guide.md
- color-system.md
- decision-trees.md
- motion-graphics.md
- scripts/accessibility_checker.py
- scripts/ux_audit.py
- typography-system.md
- ux-psychology.md
- visual-effects.md
Open the folder on GitHubat commit f0a1fa7
Compare with similar skills
Frontend Design next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Frontend Design this skillxenitV1/Antigravity-Workflows | 130 | — | ~2.9k | Automated safety check: Notes | MIT | |
| Userinterface Wikiraphaelsalaja/userinterface-wiki | 906 | — | ~3.5k | Automated safety check: Pass | MIT | |
| Gridgeistohmiler/gridgeist | 114 | — | ~2.6k | Automated safety check: Pass | MIT | |
| Frontend Designudecode/plate | 17k | — | ~3.6k | Automated safety check: Pass | Custom licence | |
| Bryl Minimal Designbryllim/bryl-minimal-design | 115 | — | ~2.9k | Automated safety check: Pass | MIT | |
| Using Ouds Web Version Major MinorOrange-OpenSource/Orange-Boosted-Bootstrap | 222 | — | ~4.2k | Automated safety check: Pass | MIT |
Similar skills
Gridgeist
ohmiler/gridgeist
A skill your agent uses when creating, redesigning, or reviewing web interfaces that need product-specific structure, clear hierarchy, responsive composition, accessible interaction, or relief from…
Frontend Design
udecode/plate
Build web interfaces with genuine design quality, not AI slop.
Bryl Minimal Design
bryllim/bryl-minimal-design
Apply the bryl-minimal design language — a monochrome, typography-driven minimal aesthetic with halftone dot textures, pixel-font display headings, tiny uppercase monospace labels, soft large-radius…
Using Ouds Web Version Major Minor
Orange-OpenSource/Orange-Boosted-Bootstrap
Provides comprehensive knowledge of the OUDS Web library (Orange Unified Design System for Web), a Bootstrap-based CSS/JS framework for building Orange-branded web interfaces.
Frontend UI Standards
MaxHan7/frontend-ui-standards-skill
A skill your agent uses when implementing, refactoring, or reviewing frontend UI across SwiftUI, React, React Native, Flutter, web, or mobile apps.
More from xenitV1/Antigravity-Workflows
All 42 skills in this repoParallel Agents
xenitV1/Antigravity-Workflows
Native multi-agent orchestration using Claude Code's Agent Tool.
Mobile Design
xenitV1/Antigravity-Workflows
Mobile-first design thinking and decision-making for iOS and Android apps.
Bash Linux
xenitV1/Antigravity-Workflows
Bash/Linux terminal patterns. An agent skill from xenitV1/Antigravity-Workflows.
Performance Profiling
xenitV1/Antigravity-Workflows
Performance profiling principles. An agent skill from xenitV1/Antigravity-Workflows.
Plan Writing
xenitV1/Antigravity-Workflows
Structured task planning with clear breakdowns, dependencies, and verification criteria.
Behavioral Modes
xenitV1/Antigravity-Workflows
AI operational modes (brainstorm, implement, debug, review, teach, ship, orchestrate).
Related
Categories
Questions about Frontend Design
What does Frontend Design do?
Design thinking and decision-making for web UI. An agent skill from xenitV1/Antigravity-Workflows. Frontend Design is an agent skill from xenitV1/Antigravity-Workflows. Design thinking and decision-making for web UI.
When should I use Frontend Design?
Frontend Design fits situations like: designing components; creating aesthetic interfaces.
How do I install Frontend Design in Claude Code?
Run `npx skills add xenitV1/Antigravity-Workflows --skill frontend-design -a claude-code`. Or copy the skill folder (skills/frontend-design in xenitV1/Antigravity-Workflows) into .claude/skills/frontend-design in your project. Claude Code loads it when a task matches its description.
How do I install Frontend Design in Codex?
Run `npx skills add xenitV1/Antigravity-Workflows --skill frontend-design -a codex`. Or copy the skill folder (skills/frontend-design in xenitV1/Antigravity-Workflows) into .agents/skills/frontend-design in your project. Codex loads it when a task matches its description.
Can I use Frontend Design in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add xenitV1/Antigravity-Workflows --skill frontend-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/frontend-design, .gemini/skills/frontend-design, .github/skills/frontend-design and .opencode/skills/frontend-design in your project.
What does Frontend Design need to run?
Going by SKILL.md and its folder, Frontend Design needs Python for the scripts in its folder and the command-line tools its instructions call (python). Our summary lists: Python 3. Its frontmatter pre-approves these tools: Read, Write, Edit, Glob, Grep, Bash.
Does Frontend Design access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Frontend Design safe to install?
Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Frontend Design use?
Frontend Design is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Frontend Design use?
About 2.9k tokens (SKILL.md is roughly 11k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Frontend Design?
Skills that share tags, products or a category with Frontend Design: Userinterface Wiki (raphaelsalaja/userinterface-wiki, 906 stars), Gridgeist (ohmiler/gridgeist, 114 stars), Frontend Design (udecode/plate, 17k stars) and Bryl Minimal Design (bryllim/bryl-minimal-design, 115 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Frontend Design?
xenitV1 (a GitHub user) maintains it in xenitV1/Antigravity-Workflows, which has 130 GitHub stars. The repository holds 42 skills in this directory. The repository was last updated on January 14, 2026.
Source: xenitV1/Antigravity-Workflows on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.