skills.rest
gmcabrita
gmcabritaCOMMUNITY
Explore all skills by this author →
Website𝕏@gmcabritaGitHub

frontend-design

Convert design briefs into working HTML/CSS/JS components and templates.

6|1|Updated Nov 23, 2023
Search Tags:#accessibility#frontend-design#ui-implementation#aesthetic-direction#typography-system#responsive-layout
One-click install
npx skills add https://github.com/gmcabrita/dotfiles --skill frontend-design-gmcabrita
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/gmcabrita/dotfiles/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/gmcabrita/dotfiles --skill frontend-design-gmcabrita

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers and developers often struggle to translate briefs into consistent, production-ready frontend interfaces. This skill provides a clear methodology that bridges concept and code, ensuring UI decisions are actionable and codable.

Core Features & Use Cases

  • Design-to-code workflow: convert design concepts into working HTML/CSS/JS components with accessible markup.
  • Typography and color system: establish tokens and a CSS variable system for cohesive theming.
  • Reusable patterns: provide component blueprints for common screens (landing, dashboard, form).
  • Use Case: Imagine redesigning a SaaS dashboard; this skill yields a ready-to-run UI kit aligned to brand.

Quick Start

Generate a ready-to-run frontend UI skeleton that matches the provided design brief.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I convert a design brief into production-ready frontend code?▼

To convert a design brief into production-ready frontend code, use a structured design-to-code workflow that requires a clear brief, chosen aesthetic direction, and typography system to output working HTML/CSS/JS components.

How do I create an accessible and responsive typography system for web interfaces?▼

Creating an accessible and responsive typography system involves establishing design tokens and a CSS variable system for cohesive theming, ensuring UI decisions are actionable and codable across frontend frameworks.

Does this design-to-code workflow support React and Vue frameworks?▼

Yes, this design-to-code workflow applies to creating or restyling web pages, components, or apps across HTML/CSS/JS, React, and Vue frameworks, outputting ready-to-run UI templates aligned to brand.

What is the best way to generate a UI kit for a SaaS dashboard?▼

The best way to generate a UI kit for a SaaS dashboard is applying a structured methodology that provides reusable component blueprints for common screens, yielding a ready-to-run interface aligned to brand.

What do I need to provide to generate a frontend UI skeleton?▼

To generate a frontend UI skeleton, you need to provide a clear design brief, a chosen aesthetic direction, and a defined typography and color system to ensure accessible and responsive coding practices.

Related Skills

Explore More Design & Creative Skills→
abhishekmmgnabhishekmmgn

design-consultation

Translate product context into a design system proposal with typography, color, spacing, layout, and motion.

Community
Advanced
tianguzhetianguzhe
1

frontend-design

Generate production-grade frontend interfaces with HTML, CSS, and React components.

Community
Advanced
webdriveriowebdriverio
11

Frontend Components

Enforce frontend component coding standards across web UI projects.

Official
Basic
nkabbarankabbara

markup-from-image

Convert UI images into semantic HTML or JSX markup.

Community
Advanced