skills.rest
fedickinson
fedickinsonCOMMUNITY
Explore all skills by this author →
GitHub

frontend-ui-ux-design

Design React components with Budget Buddy design tokens and Bootstrap patterns.

Updated Aug 27, 2026
Search Tags:#accessibility#react#ui-design#design-system#bootstrap#component-patterns
One-click install
npx skills add https://github.com/fedickinson/budget-buddy-2 --skill frontend-ui-ux-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-ux-design
Source: https://github.com/fedickinson/budget-buddy-2/tree/main/.claude/skills/frontend-ui-ux-design
Command: npx skills add https://github.com/fedickinson/budget-buddy-2 --skill frontend-ui-ux-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a concise, shared reference for building Budget Buddy UI components that align with the design system, ensuring consistency across the product.

Core Features & Use Cases

  • Design system-guided component templates and patterns.
  • Accessibility and responsive layout guidance with practical examples.
  • Real-world use cases demonstrating how to implement common components in Budget Buddy.

Quick Start

Create a new React component following the provided templates and design tokens, then apply the component styles and Bootstrap patterns.

Frequently Asked Questions about frontend-ui-ux-design

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

FAQPage Schema
How do I create React UI components that follow a consistent design system?▼

To create consistent React UI components, reference shared design tokens, component templates, and Bootstrap patterns to maintain unified typography, spacing, and color usage across the frontend codebase.

What's the best way to ensure accessibility in responsive React layout patterns?▼

Ensure accessibility in responsive React layouts by applying accessibility checks and responsive layout guidance with practical examples, verifying that component patterns meet design system standards.

Can I use Bootstrap styling patterns with a custom React design system?▼

Yes, you can integrate Bootstrap patterns with a custom React design system by referencing design tokens and component templates while applying the styles to maintain consistent UI.

How do I apply design tokens to standardize typography and spacing in React components?▼

Apply design tokens to React components by referencing the shared values for typography, spacing, and color usage, ensuring all component templates align with the established design system.

Does this React component template approach work for documenting UI design decisions?▼

Yes, this approach works for documenting UI design decisions by providing a shared reference for styling choices, accessibility checks, and Bootstrap integration that ensures consistency across the product.

Related Skills

Explore More Design & Creative Skills→
yuheitomiyuheitomi

set-up-biome

Configure Biome and Shadcn/UI preferences in React projects with pnpm.

Community
Advanced
NuclearPlayerNuclearPlayer
361

creating-components

Create React UI components with tests and Storybook stories.

Official
Intermediate
murphytruemanmurphytrueman
155

cicd-integration

Generate CI/CD pipeline configurations for design system quality checks.

Community
Advanced
anicca-labsanicca-labs

coding-standards

Enforce React Native coding standards with TypeScript, Prettier, and custom rules.

Official
Intermediate