skills.rest
renpereiradx
renpereiradxCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Redirects frontend design work to the fixed Fluent 2 design contract for the ERP webapp.

Updated Jul 9, 2025
Search Tags:#design system#design tokens#tailwind#erp#deprecated#frontend design#fluent 2
One-click install
npx skills add https://github.com/renpereiradx/erp-webapp --skill frontend-design-renpereiradx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/renpereiradx/erp-webapp/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/renpereiradx/erp-webapp --skill frontend-design-renpereiradx

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? This Skill prevents inconsistent, invented UI aesthetics in the ERP Vista Bar webapp by deprecating free-form frontend design and enforcing the project's fixed design system. ## Core Features & Use Cases - Design Enforcement: Blocks invented aesthetics, custom fonts, gradients, textures, and dramatic shadows in favor of the established Fluent 2 system. - Redirection: Points the agent to load the erp-design-contract skill and follow DESIGN.md for all UI work. - Use Case: When asked to design a new dashboard page, the agent refuses to improvise a visual style and instead applies the Fluent 2 tokens from design/tokens.json and components from src/components/ui/. ## Quick Start Load the erp-design-contract skill and follow DESIGN.md for any frontend design task in this repository.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I design a new page for the ERP Vista Bar webapp?▼

Load the erp-design-contract skill and follow DESIGN.md instead of inventing a style. Use the Fluent 2 tokens defined in design/tokens.json and the existing components in src/components/ui/.

Can I use custom fonts or gradients in this ERP project?▼

No. The project forbids alternative fonts, gradients, textures, and dramatic shadows. Visual consistency comes from the fixed Fluent 2 design contract, with primary color #0078D4 and dark variant #2899F5.

Why is the frontend-design skill deprecated in this repository?▼

It is deprecated because the ERP webapp has a fixed design system based on Fluent 2 and design tokens. Allowing the model to choose aesthetics would break visual consistency across the application.

What design system does the ERP Vista Bar webapp use?▼

It uses Fluent 2 with primary color #0078D4 and dark variant #2899F5. Tokens live in design/tokens.json for Tailwind 4 with @theme and .dark support, and components live in src/components/ui/.

When should I not use the frontend-design skill?▼

Never use it in this repository, since it is explicitly neutralized. For any UI or styling task, load the erp-design-contract skill and follow the rules in DESIGN.md instead.

Related Skills

Explore More Design & Creative Skills→
open-metadataopen-metadata
15.1k

ui-core-components

Guides React/TSX layout code toward Box, Grid, Card, and Divider primitives with semantic color tokens.

Official
Intermediate
GORKHAIGORKHAI

frontend-ui

Standardize React components and UI states with Tailwind styling and design tokens.

Community
Intermediate
wagnerra23wagnerra23

oimpresso-design

Generate Oimpresso ERP Cockpit interfaces with brand tokens and 3-column layout.

Community
Intermediate
phrazzldphrazzld
13

design

Orchestrate end-to-end UI design for React/Next.js projects with Tailwind CSS.

Community
Advanced