skills.rest
SELISEdigitalplatforms
SELISEdigitalplatformsOFFICIAL
Explore all skills by this author →
Website𝕏@SELISE_GroupGitHub

frontend-design

Design production-grade frontend interfaces with typography, color systems, motion, and accessibility.

3|Updated Mar 30, 2026
Search Tags:#design#ui#frontend#components#aesthetics#web
One-click install
npx skills add https://github.com/SELISEdigitalplatforms/blocks-skills --skill frontend-design-selisedigitalplatforms
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/SELISEdigitalplatforms/blocks-skills/tree/main/.kilo/skills/frontend-design
Command: npx skills add https://github.com/SELISEdigitalplatforms/blocks-skills --skill frontend-design-selisedigitalplatforms

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create distinctive frontend interfaces with production-grade quality, transforming vague briefs into visually compelling, usable UI.

Core Features & Use Cases

  • Distinctive aesthetics: define bold visual language and consistent design tokens for a memorable UI.
  • End-to-end frontend guidance: from typography and color systems to motion and accessibility, guiding implementation across frameworks.
  • Use Case: When asked to build a web app UI, deliver polished interfaces with reusable components and design systems.

Quick Start

Describe your frontend requirements and aesthetic direction, and I will implement a production-grade UI accordingly.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I design a production-grade frontend interface from a vague brief?▼

Designing a production-grade frontend interface involves defining a bold visual language with consistent design tokens, typography, color systems, and motion. This process transforms vague briefs into visually compelling, usable UI components and dashboards.

What's the best way to build a reusable UI component library for modern web apps?▼

Building a reusable UI component library requires establishing a coherent design direction with distinct aesthetics and standardized design tokens. This ensures reusable frontend artifacts and guidelines for implementation across modern web stacks.

Does frontend design guidance include accessibility and motion considerations?▼

Frontend design guidance includes accessibility and motion by defining end-to-end frontend systems. It prioritizes aesthetic quality while ensuring practical implementation through coherent typography, color systems, and motion guidelines.

Can I use this approach to create design tokens for websites and dashboards?▼

You can use this approach to create design tokens for websites and dashboards by defining a bold visual language. It delivers coherent design directions and reusable frontend artifacts applicable across modern web stacks.

How do I ensure my web app UI has a distinctive aesthetic and practical implementation?▼

Ensuring your web app UI has a distinctive aesthetic and practical implementation requires prioritizing visual quality and usability. It involves defining consistent design tokens, typography, color systems, and code structure guidelines.

Related Skills

Explore More Design & Creative Skills→
jungaijungai
2

frontend-design

Create accessible, responsive frontend interfaces with defined aesthetic direction.

Community
Advanced
msichtermanmsichterman

frontend-design

Design and implement accessible, responsive frontend interfaces with React, HTML/CSS, or modern frameworks.

Community
Advanced
2nth-ai2nth-ai
1

tech/design

Provide design tools and principles for UI and product design.

Official
Advanced
chris78reychris78rey

design-system-components

Generate HTML/Tailwind UI components and design tokens with CSS variables and reusable patterns.

Community
Basic