skills.rest
pengelbrecht
pengelbrechtCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

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

6|1|Updated Jan 8, 2026
Search Tags:#typography#design#ui#accessibility#frontend#react#css
One-click install
npx skills add https://github.com/pengelbrecht/ticks --skill frontend-design-pengelbrecht
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/pengelbrecht/ticks/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/pengelbrecht/ticks --skill frontend-design-pengelbrecht

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create distinctive, production-grade frontend interfaces with meticulous design and implementation, ensuring interfaces feel unique and crafted rather than generic AI aesthetics.

Core Features & Use Cases

  • Design and implement production-grade frontend interfaces across web platforms (HTML/CSS, React, Vue) with a strong aesthetic point of view.
  • Deliver polished UI components, pages, dashboards, and themes that balance typography, color, motion, and accessibility.
  • Use cases include building landing pages, admin dashboards, component libraries, or design systems that command attention and usability.

Quick Start

Outline the visual direction and implement a complete, production-ready frontend component that matches that aesthetic.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build production-grade React UI components that avoid generic AI aesthetics?▼

To build production-grade React UI components, outline a specific visual direction first. This ensures the interface implements cohesive typography, theming tokens, and motion, avoiding generic AI aesthetics.

What's the best way to design accessible web dashboards with cohesive typography?▼

Designing accessible web dashboards involves balancing typography, color, and motion while satisfying accessibility guidelines. This approach delivers polished pages that command attention and usability.

Can I use this to generate a complete HTML and CSS UI kit?▼

Yes, you can generate a complete HTML and CSS UI kit. It supports building web components, pages, and themes across HTML/CSS, React, or Vue with a strong aesthetic point of view.

How does this approach handle frontend theming tokens and motion design?▼

Frontend theming tokens and motion design are handled by satisfying specific requirements for cohesive visual systems. This ensures the final UI components feel unique and meticulously crafted.

Does this work for creating landing pages and admin dashboards in Vue?▼

Yes, it works for creating landing pages and admin dashboards in Vue. It applies a strong aesthetic point of view to ensure the frontend interfaces balance usability and distinctive design.

Are there limitations when using this method for frontend design and implementation?▼

A key limitation is avoiding generic AI aesthetics in frontend design and implementation. The process requires outlining a visual direction to ensure the UI components feel uniquely crafted rather than templated.

Related Skills

Explore More Design & Creative Skills→
IwatsukaYuraIwatsukaYura

frontend-design

Define and enforce a cohesive visual system for frontend interfaces.

Community
Advanced
rauell1rauell1
3

frontend-design

Design and build distinctive frontend interfaces with cohesive typography, color, motion, and layout.

Community
Advanced
gensart-projsgensart-projs

performance-profiling

Measure Lighthouse scores and core web vitals to identify performance bottlenecks.

Community
Intermediate
SunshineMahiruSunshineMahiru

frontend-design

Create custom frontend interfaces with distinctive typography and color themes.

Community
Advanced