skills.rest
digresik-tech
digresik-techCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Transform UI style requirements into frontend code with design tokens.

1|Updated Feb 14, 2026
Search Tags:#accessibility#design system#tailwind css#frontend development#ui design#react components
One-click install
npx skills add https://github.com/digresik-tech/olt-monitoring-mini --skill frontend-design-digresik-tech
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/digresik-tech/olt-monitoring-mini/tree/main/skills/frontend-design
Command: npx skills add https://github.com/digresik-tech/olt-monitoring-mini --skill frontend-design-digresik-tech

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill transforms vague UI style requirements into executable, production-grade frontend code, ensuring visual consistency, accessibility, and maintainability.

Core Features & Use Cases

  • Systematic Design: Enforces a token-first methodology for consistent styling.
  • Creative Execution: Encourages bold, unique aesthetics beyond generic AI defaults.
  • Accessibility: Builds in WCAG AA compliance from the ground up.
  • Use Case: When a user asks to "design a premium SaaS dashboard," this Skill will generate not just the code but also the underlying design tokens, ensuring a cohesive and accessible user interface that stands out.

Quick Start

Use the frontend-design skill to build a modern, accessible button component with primary and secondary variants.