skills.rest
saulo-fl
saulo-flCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

fidelidad-diseno

Enforces design decisions and audits WCAG contrast for the Armado en México UI.

Updated Jun 10, 2026
Search Tags:#design system#design consistency#react UI#css tokens#accessibility audit#wcag contrast
One-click install
npx skills add https://github.com/saulo-fl/armado-en-mexico --skill fidelidad-diseno-saulo-fl
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fidelidad-diseno
Source: https://github.com/saulo-fl/armado-en-mexico/tree/main/.claude/skills/fidelidad-diseno
Command: npx skills add https://github.com/saulo-fl/armado-en-mexico --skill fidelidad-diseno-saulo-fl

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? When adding or modifying UI in the Armado en México React app, it is easy to break already-made design decisions, reuse forbidden vocabulary, or ship color pairs that fail contrast. This Skill preserves the project's design memory and known pitfalls so UI changes stay consistent. ## Core Features & Use Cases - Design decision registry: Records settled product decisions, the current weapon-detail-page structure, forbidden vocabulary ("dossier", "curaduría"), and "do not break" rules such as build-step requirements and PALETTE immutability. - WCAG contrast auditing: The scripts/contraste.mjs script reads CSS custom properties from estilo.css and audits text, brand-surface, and stationery color pairs across both light and dark themes against WCAG 2.1 thresholds. - Learning log: A dated bitácora of hard-won lessons (IntersectionObserver edge cases, Safari aspect-ratio bugs, localStorage seeding traps) to avoid repeating past mistakes. - Use Case: Before editing a .jsx screen or adding a new card component, consult this Skill to reuse existing ui.jsx primitives, respect the light "Documento Oficial Mexicano" theme, and run the contrast script to validate any new color pairing. ## Quick Start Ask the AI to review your planned UI change against the fidelidad-diseno guidelines and run the contrast audit script before committing.

Frequently Asked Questions about fidelidad-diseno

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

FAQPage Schema
How do I check WCAG color contrast for a website theme?▼

Run the contraste.mjs script with Node to audit all defined color pairs in both light and dark themes against WCAG 2.1 thresholds (4.5:1 for text, 3:1 for graphics). You can also pass two hex colors as arguments to check a single pair.

How to keep UI changes consistent with an existing design system?▼

Reuse the shared primitives defined in ui.jsx (TiraFiltros, ArmaCard, SectionHeader, and others) instead of inventing per-screen styles, keep skin styles in estilo.css with amx- classes, and never mutate the PALETTE token object at runtime.

Does the contrast script support dark mode palettes?▼

Yes. The script reads the :root token block in estilo.css, builds both the light palette and the dark variant from --d- prefixed tokens, and audits the same list of color pairs in each theme separately, failing if any pair in either theme falls below its threshold.

Why does my contrast audit script report nothing after a refactor?▼

If the palette file stores var(--token) references instead of hex values, a regex looking for hex colors matches nothing and the audit goes silently empty. This script avoids that by reading and resolving the CSS custom properties directly from estilo.css.

What are common pitfalls when modifying a prerendered React app?▼

Known traps include localStorage seeded data overriding data.js edits, IntersectionObserver missing targets that jump past the viewport, masks clipping box-shadows, and Safari failing to resolve max-height percentages inside aspect-ratio boxes. The Skill's learning log documents each with its fix.

Related Skills

Explore More Design & Creative Skills→
ankaboot-sourceankaboot-source
2

bergside-design-systems

Catalogs 67 design system aesthetics and pulls specific style guides via the typeui.sh CLI.

Official
Basic
xg-gh-25xg-gh-25
36

swarm-release

Automate SwarmAI desktop release workflows from preflight to GitHub publishing.

Community
Advanced
ebecerra-developerebecerra-developer

css-conventions

Enforces CSS Modules conventions, design tokens, and CTA patterns for React components.

Community
Intermediate
jokerman89jokerman89

design-dna

Searches a curated design corpus and composes design-system recommendations with token emission and validation.

Community
Advanced