skills.rest
jkenney47
jkenney47COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Enforce UI/UX principles and anti-pattern guardrails for Finance-App.

Updated Aug 27, 2026
Search Tags:#ui#frontend#design system#react native#ux#guardrails
One-click install
npx skills add https://github.com/jkenney47/finance-app-ux-planning-snapshot-20260308-155100 --skill frontend-design-jkenney47
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/jkenney47/finance-app-ux-planning-snapshot-20260308-155100/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/jkenney47/finance-app-ux-planning-snapshot-20260308-155100 --skill frontend-design-jkenney47

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill establishes and enforces a consistent, high-quality UI/UX standard for the Finance-App, preventing generic or inconsistent design outputs.

Core Features & Use Cases

  • Design Principle Guidance: Provides specific DOs and DON'Ts for UI/UX elements, ensuring adherence to product vision.
  • Anti-Pattern Guardrails: Identifies and prevents common design pitfalls and undesirable aesthetics.
  • Quality Checklist: Offers a structured review process before implementation or sign-off.
  • Use Case: Before implementing a new dashboard screen, use this Skill to ensure the design aligns with the app's established visual hierarchy, token usage, and accessibility standards.

Quick Start

Apply the frontend-design skill to review the proposed UI mockups for the new transaction history screen.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I ensure consistent UI/UX in a React Native and Expo Router project?▼

To ensure consistent UI/UX in a React Native project, apply design principle guardrails that enforce specific DOs and DON'Ts for visual hierarchy, component usage, and accessibility before implementation.

What are common UI/UX anti-patterns to avoid when building a mobile app dashboard?▼

Common UI/UX anti-patterns to avoid include generic design outputs, inconsistent visual hierarchy, and ignoring defined theme tokens. Using a quality checklist helps identify and prevent these design pitfalls before sign-off.

How do I audit a React Native Paper component system for design consistency?▼

You audit a React Native Paper component system by reviewing proposed UI mockups against established design principles, verifying adherence to TypeScript stack requirements, and validating proper theme token usage.

Can I use this design system guardrail tool for a complete UI redesign and polish?▼

Yes, you can use design system guardrails for a complete UI redesign. The tool guides intentional, production-ready output by enforcing repo-specific standards during redesign, critique, audit, or polish phases.

What steps should I take before implementing a new transaction history screen?▼

Before implementing a new screen, review the UI mockups against design guardrails to ensure alignment with the product vision, validate React Native Paper component usage, and complete a structured quality checklist.

Why does my mobile app frontend design output look generic and inconsistent?▼

Frontend design output looks generic and inconsistent when it lacks enforced repo-specific UI/UX principles. Establishing anti-pattern guardrails prevents undesirable aesthetics and ensures high-quality, intentional design.

Related Skills

Explore More Design & Creative Skills→
clovernguyen1010-ship-itclovernguyen1010-ship-it

ba-html-to-react-native-ds-code-gen

Convert HTML prototypes into Expo-compatible React Native components with TypeScript.

Community
Advanced
gounthargounthar

expo-router-expert

Configure Expo Router file-based routing with dynamic routes and layouts.

Community
Advanced
dtorrasdtorras

building-native-ui

Build native UI screens with Expo Router and NativeTabs layouts.

Community
Advanced
wahidyankfwahidyankf
3

swe-developing-frontend-ui

Guide TypeScript React UI development with repo-specific design tokens and WCAG compliance.

Community
Intermediate