skills.rest
nattergabriel
nattergabrielCOMMUNITY
Explore all skills by this author →
𝕏@eterdevGitHub

frontend-design

Generate frontend interfaces with design tokens and accessibility guidance.

2|Updated Mar 18, 2026
Search Tags:#ui#web-development#component-generation#aesthetics#design-systems#frontend-design
One-click install
npx skills add https://github.com/nattergabriel/oasis-greenhouse --skill frontend-design-nattergabriel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/nattergabriel/oasis-greenhouse/tree/main/frontend/.agents/skills/frontend-design
Command: npx skills add https://github.com/nattergabriel/oasis-greenhouse --skill frontend-design-nattergabriel

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications. Generates creative, polished code that avoids generic AI aesthetics.

Core Features & Use Cases

  • Distinctive UI output: Generate polished, brand-aligned components and pages with production-ready quality.
  • Design-informed development: Output includes design tokens, semantic tokens, and accessible guidelines to ensure consistency.
  • Use Case: Build a dashboard, marketing site, or internal tool that demands a coherent visual system and robust implementation.

Quick Start

Design and implement a polished frontend dashboard following the specified design system.

Frequently Asked Questions about frontend-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate production-grade frontend UI that avoids generic AI aesthetics?▼

Generate production-grade frontend UI by applying design-informed development techniques that output polished, brand-aligned components and semantic design tokens to ensure a distinctive visual language.

What is the best way to build a coherent design system for a web dashboard?▼

Build a coherent design system for a web dashboard by generating ready-to-run code alongside semantic design tokens and accessibility guidelines, ensuring a scalable and robust implementation.

Can I generate accessible web components and marketing site pages together?▼

Yes, you can generate accessible web components and marketing site pages together. The output includes semantic tokens and accessible guidelines to support coherent visual systems across multiple project assets.

Does frontend-design output include design tokens for scalable implementation?▼

Yes, frontend-design output includes design tokens and semantic tokens. These tokens ensure consistency and support scalable implementation across web components, pages, and applications.

Why do my generated web components lack a distinctive visual style?▼

Generated web components lack a distinctive visual style when design tokens and accessibility guidelines are not applied. Producing polished, brand-aligned interfaces requires design-informed development to avoid generic aesthetics.

What do I need to build an internal tool with a coherent visual system?▼

To build an internal tool with a coherent visual system, you need a process that outputs ready-to-run code, design tokens, and accessibility guidance to support scalable implementation and polished UI language.

Related Skills

Explore More Design & Creative Skills→
truchottruchot
2

direction-artistique

Define visual identity, brand language, and governance for projects.

Community
Advanced
az9713az9713
2

land-and-deploy

Merge pull requests, deploy code, and verify production health.

Community
Advanced
hendrax5hendrax5

phase-6-ui-integration

Implement frontend UI and integrate it with backend APIs.

Community
Intermediate
dt418dt418

Docs Pack

Build documentation platforms with versioned docs, search, navigation, code highlighting, and API reference generation.

Community
Intermediate