skills.rest
cmetech
cmetechCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Generate HTML/CSS/JS code, design tokens, and UI components for web interfaces.

Updated May 25, 2026
Search Tags:#design#ui#frontend#react#components#aesthetics#web
One-click install
npx skills add https://github.com/cmetech/otto-cli --skill frontend-design-cmetech
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/cmetech/otto-cli/tree/main/src/resources/skills/frontend-design
Command: npx skills add https://github.com/cmetech/otto-cli --skill frontend-design-cmetech

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Distinctive, production-grade frontend interfaces are hard to design and implement quickly; this skill accelerates the creation process while preserving quality and brand alignment.

Core Features & Use Cases

  • Generate polished HTML/CSS/JS code, component structures, and design tokens tailored to a defined aesthetic direction.
  • Provide accessible, responsive layouts and reusable UI primitives for dashboards, landing pages, and web apps.
  • Use Case: A designer asks for a modern, high-contrast dashboard; the skill returns a ready-to-ship UI kit with components and styling guidelines.

Quick Start

Generate a complete frontend UI scaffold that matches your chosen aesthetic direction.

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 components quickly?▼

You can generate distinctive, production-grade frontend interfaces by providing aesthetic and structural requirements. The skill outputs ready-to-ship HTML, CSS, and JS code, component structures, and design tokens tailored to your specified web app or dashboard direction.

What is the best way to build an accessible and responsive web dashboard?▼

The best way to build an accessible and responsive web dashboard is to automate the layout generation process. This approach delivers production-ready HTML, CSS, and JS code, ensuring responsive behavior and accessibility standards are integrated into the UI primitives.

Can I use this to generate design tokens for React components?▼

Yes, you can generate design tokens for React components. The skill automates the creation of frontend interfaces and delivers tailored design tokens alongside component structures and styling guidelines to match your chosen aesthetic direction.

Do I need existing code to generate a frontend UI scaffold?▼

No, you do not need existing code to generate a frontend UI scaffold. You can start from scratch by defining an aesthetic direction and structural requirements, and the skill will deliver a complete, ready-to-ship UI kit with components and styling.

Does the generated frontend code include accessibility and responsive behavior?▼

Yes, the generated frontend code includes accessibility and responsive behavior. The skill explicitly guides structure, accessibility, and responsive layouts, ensuring the production-ready HTML and CSS output meets necessary web standards for your dashboards and apps.

Are there limitations when automating frontend design for full web apps?▼

Automating frontend design for full web apps requires clear aesthetic and structural constraints to maintain brand alignment. While it accelerates the creation of production-ready code and design tokens, you must provide specific constraints to ensure the generated UI meets your project requirements.

Related Skills

Explore More Design & Creative Skills→
truchottruchot
2

direction-artistique

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

Community
Advanced
skatedduskateddu
27

frontend-design

Generate frontend interfaces with HTML/CSS/JS for React, Vue, or plain websites.

Community
Advanced
HieubkavHieubkav

ui-styling

Create accessible UI styling with shadcn/ui and Tailwind CSS for React applications.

Community
Advanced
AzamCodesAzamCodes

frontend-design

Design and implement production-grade frontend interfaces with bespoke typography and responsive layouts.

Community
Advanced