skills.rest
get-convex
get-convexOFFICIAL
Explore all skills by this author →
Website𝕏@convex_devGitHub

frontend-design

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
One-click install
npx skills add https://github.com/get-convex/components-submissions-directory --skill frontend-design-get-convex
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
irahardiantoirahardianto

frontend-design

Generate React, Vue, or HTML/CSS frontend interfaces with design tokens and accessibility.

Community
Advanced
catalinakarstulovic2-aicatalinakarstulovic2-ai

frontend-design

Design and implement production-grade frontend interfaces with design tokens and responsive layouts.

Community
Advanced
VidyaBodepudiVidyaBodepudi
2

frontend-ui-engineering

Review web components for accessibility, responsiveness, and performance.

Community
Advanced
pengelbrechtpengelbrecht
6

frontend-design

Design production-grade frontend interfaces with cohesive typography, theming tokens, and accessibility.

Community
Advanced