rflectr Design System

Directives d'expert et ressources pour générer des interfaces et des prototypes de marque pour la passerelle smart-router locale rflectr.

déclencheurs:rflectr designbranded interfaceui kitdesign guidelinescreate prototyperflectr brand

GitHub SKILL.md

Ce qu'il fait

Fournit un système de design complet pour la marque rflectr, incluant les couleurs, la typographie et les composants UI. Il permet aux agents d'agir en tant que designers experts pour créer des artefacts visuels cohérents, allant de prototypes rapides (HTML/CSS) à du code prêt pour la production.

Quand l'utiliser

Invoquez cette compétence lorsque vous êtes chargé de construire toute surface UI pour rflectr, de concevoir des pages d'atterrissage, de créer des maquettes pour le tableau de bord local ou de garantir le respect de l'identité de marque 'jeweled relay'.

Ce qui est inclus

Ressources : Marques SVG, polices et le lockup 'gold-bee'.
Tokens : Un ensemble complet de tokens CSS pour les couleurs (dégradé relay), l'espacement et la typographie (Space Grotesk, JetBrains Mono).
Composants : Primitives React pour l'UI de base et les éléments spécifiques au relay.
Directives : Règles de marque non négociables concernant l'utilisation des couleurs sur fonds sombres et la forme hexagonale atomique.

Agents compatibles

Idéal pour les agents capables de générer du code HTML, CSS et React tels que Claude Code, Cursor et Gemini CLI.

Étiquettes

#design-system #ui-ux #branding #prototyping #react #css

Pas encore audité

Cette compétence n'a pas encore été examinée par notre pipeline d'audit automatisé.

Informations

Dépôt: rflectr
Étoiles: 16

Compétences similaires

Agent Browser — Core

Core usage guide for agent-browser: snapshot-and-ref browser automation to navigate pages, interact with elements, extract data, take screenshots, manage sessio

React Development Expert

Provides authoritative React guidance on hooks, state patterns, Server Components, performance optimization, and common architectural patterns.

Migrate from Next.js App Router to TanStack Start

Step-by-step migration checklist to move an App Router Next.js codebase to TanStack Start, covering routes, server functions, middleware, data fetching and buil

Office & Design Toolkit

Comprehensive toolkit for processing and producing DOCX, PPTX, XLSX and PDF files plus design guidance and quality checks for professional office documents and

ClearShot — Screenshot UI Analysis

Structured UI screenshot analysis using a 5×5 spatial grid, full element inventory, and design system extraction. Escalates to full implementation blueprint whe

DAUB UI

A drop-in CSS+JS component library with 70+ carefully designed components and 20 theme families for fast, consistent UI building.

dotLottie Web

Guidelines and patterns for implementing performant dotLottie/Lottie animations on the web (vanilla JS and React), including workers, state machines, and themin

Brand Voice Consistency

Enforce consistent brand voice, tone, and vocabulary across marketing copy and customer-facing communications.

Retour aux compétences