frontend-design

Name: frontend-design
Availability: InStock
Author: Convex

Automate frontend interface creation with design systems and implementation-ready code and documentation.

9|3|Updated Nov 28, 2025

Search Tags:#typography #accessibility #frontend #color #design-system #responsive-design #ux-guidelines

Ready to run

npx skills add https://github.com/get-convex/components-submissions-directory --skill frontend-design-get-convex

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/get-convex/components-submissions-directory/tree/main/.codex/skills/frontend-design
Command: npx skills add https://github.com/get-convex/components-submissions-directory --skill frontend-design-get-convex

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Production-grade frontend interfaces often suffer from generic aesthetics, inconsistent systems, and fragile handoffs. This skill provides a structured approach to creating distinctive, high-quality frontend interfaces with deliberate design direction, rigorous guidelines, and implementation-ready guidance.

Core Features & Use Cases

Design-driven workflow that links context gathering, bold aesthetic direction, and practical implementation patterns.
Comprehensive guidelines covering typography, color systems, spacing, motion, interaction, accessibility, and responsive behavior.
Use cases include dashboards, marketing sites, and component libraries that require polished, scalable frontends with clear design systems.

Quick Start

Provide a project brief including target audience, use cases, and brand tone, then implement a polished frontend component based on the brief.

Frequently Asked Questions about frontend-design

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

FAQPage Schema

How do I build a production-grade frontend design system with accessible focus states?▼

A frontend design system requires structured guidelines for typography, color, spacing, and accessible focus states. This skill automates generating distinctive, production-grade design systems with implementation-ready code and clear developer handoff documentation.

What is the best way to establish typography and color guidelines for a web app UI?▼

Establishing typography and color guidelines requires a design-driven workflow linking context gathering to bold aesthetic direction. This ensures your web app UI maintains deliberate design systems and rigorous visual consistency across components.

How do I create responsive design and UX guidelines for a dashboard component library?▼

Creating responsive design and UX guidelines for a dashboard component library requires comprehensive rules for motion, interaction, and responsive behavior. This skill generates these guidelines automatically to ensure polished, scalable frontend components.

Can I automate frontend UI generation for marketing sites with distinctive aesthetics?▼

You can automate frontend UI generation for marketing sites to achieve distinctive aesthetics. By providing a project brief with target audience and brand tone, you receive implementation-ready code and deliberate design direction.

Does this approach to frontend design support developer handoff for component libraries?▼

This frontend design approach fully supports developer handoff for component libraries. It provides implementation-ready code, comprehensive design documentation, and rigorous guidelines covering accessibility and interaction states.