skills.rest
joshuadavidthomas
joshuadavidthomasCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design-principles

Provide structured frontend design guidance using app.md or marketing.md context files.

18|1|Updated Jan 20, 2026
Search Tags:#typography#layout#frontend#design-principles#design-systems#UI-design
One-click install
npx skills add https://github.com/joshuadavidthomas/agentkit --skill frontend-design-principles
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design-principles
Source: https://github.com/joshuadavidthomas/agentkit/tree/main/skills/frontend-design-principles
Command: npx skills add https://github.com/joshuadavidthomas/agentkit --skill frontend-design-principles

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about frontend-design-principles

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

FAQPage Schema
What design principles should I follow for a polished frontend UI?▼

Frontend design principles for a polished UI emphasize a cohesive design system using typography, layout, color, and spacing tokens to ensure consistent and usable interfaces across web apps.

How do I apply design system tokens to an admin dashboard?▼

To apply design system tokens to an admin dashboard, select the app context to trigger app-oriented rules, then enforce typography, spacing, color, and layout tokens for consistent component composition.

Can I get marketing-specific UI design guidance for landing pages?▼

Yes, you can get marketing-specific UI design guidance for landing pages by selecting the marketing context, which switches the rules to focus on campaigns and marketing-focused interface composition.

Does this frontend design guidance work for both web apps and marketing sites?▼

Yes, this frontend design guidance works for both web apps and marketing sites by providing context-aware rules that adapt specifically to dashboards and admin panels or marketing pages.

What is the best way to start building a principled frontend interface?▼

The best way to start building a principled frontend interface is selecting your design context, reviewing the specific guidance files, and consulting the principles reference for deeper technical details.

Related Skills

Explore More Design & Creative Skills→
qazuorqazuor

frontend-design

Guide UI teams through pre-coding design foundations for typography, color, and layout.

Community
Basic
jac007xjac007x

design-system-validator

Audit Walmart design-system compliance across tokens, components, and spacing.

Community
Advanced
martinholovskymartinholovsky
12

sota-frontend-design

Audit and build user interfaces against web design and UI/UX standards.

Community
Advanced
rally19rally19

resend-design-system

Standardize frontend UI development with reusable primitives and design tokens.

Community
Advanced