Skills
.Work. You
Rest

frontend-design-principles

Community

Polish UI with principled frontend guidance.

Design & Creative#typography#layout#frontend#design-principles#design-systems#UI-design
Authorjoshuadavidthomas
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill helps teams craft deliberate, polished frontend interfaces by providing a cohesive set of design principles and guidance tailored for UI work across dashboards, admin panels, and marketing sites.

Core Features & Use Cases

  • Context-aware guidance: Switch between app-oriented guidance for dashboards and admin tools and marketing-focused guidance for landing pages and campaigns.
  • Principled design system: Emphasizes typography, layout, color, spacing, and component composition to ensure consistent, usable interfaces.
  • Guided quick-start: Offers practical steps to begin applying the principles on a project, including selecting a direction and aligning with the provided app.md or marketing.md guidance.

Quick Start

Start by selecting the design context for your project (e.g., "dashboard" or "marketing site") and review the related guidance files (app.md or marketing.md) to begin applying the principles. Then consult the references/principles.md for deeper technical details.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: frontend-design-principles
Download link: https://github.com/joshuadavidthomas/agentkit/archive/main.zip#frontend-design-principles

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.