React Clean Architecture
microsoft/rayfin/.github/skills/react-clean-architecture
codingOfficial
Official Provider SkillView repo
Architectural principles for scalable, maintainable React applications. Use when designing component hierarchies, organizing directories, choosing state management patterns, decomposing large components, applying composition patterns (slots, compound components), enforcing colocation, creating custom hooks, setting up Feature-Sliced Design layers, reviewing component structure, or refactoring React code for cleanliness. Covers SRP, the 200-line rule, prop drilling avoidance, server state with Ta
Files2 files
SKILL.md186 lines
Loading editor…
Install
RecommendedOne command — your agent picks it up automatically.
Select an AI agent above to see the install command.
or
Manual Install
More stepsDownload the archive and add the files to your project manually.
Skill details
Versionv1.0.0
AuthorMicrosoft
Categorycoding
Skill IDmicrosoft/rayfin/.github/skills/react-clean-architecture
Files2 files
Related skills
AnalyticsUse when the app reads an existing Power BI semantic model — a dashboard, report, KPI, or any view over data the app does not own. Turns on the Fabric data client and the semantic-model query hook, then covers the whole workflow: pick a model, discover its schema, write and test DAX, and render it. A chart over data the app already has needs the visuals skill instead, not this one. Triggers: semantic model, dataset, Power BI, DAX, measure, "our sales data", "from the model", "the existing reportApp DeploymentValidate and remotely deploy a Universal App through the installed, version-matched Rayfin CLI. Use before deploying to run local checks, confirm the target workspace, preview the operation, deploy, and validate the live app. This skill orchestrates existing executables; it does not implement deployment.App DesignUse when building or modifying the app layout, creating UI components, or making any visual design decisions. Ensures consistency, accessibility, and a polished, unique app.App DesignUse when building or modifying the app layout, creating UI components, or making any visual design decisions. Ensures consistency, accessibility, and a polished, unique app.App ValidationWhat to validate and how to drive Playwright for this template's app. Use alongside the playwright-cli skill — playwright-cli covers the tool's commands; this skill covers performance rules, the required validation checklist, the Fabric portal embed flow, and spec file guidance.App ValidationRun focused checks while implementing and one final static, browser, and persistence validation sequence before calling a Universal App complete.