fluent-react-implementation

Implement a Fluent UI v9 + React website end-to-end — set up FluentProvider, turn a brand color into a BrandVariants ramp and light/dark/high-contrast themes (createLightTheme / createDarkTheme), wire design tokens, style with Griffel makeStyles, handle Next.js App Router SSR (the use-client + renderToStyleElements boundary) or Astro islands, build custom components on Fluent primitives, and ship a themed Storybook. Reach for this skill when building or reviewing a Fluent/React site, implementing a brand as a Fluent design language, or debugging Fluent SSR / dark-mode / theming issues. Used by `frontend-implementer` (primary) + `visual-designer` (brand to theme).

설치로 이동

저장소: mcorbett51090/RavenClaude
최근 소스 활동: 2026년 5월 28일 05:15
감지된 SKILL.md 언어: 영어
스타: 7
포크: 1

설치 방법

기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.

npx skills add https://github.com/mcorbett51090/RavenClaude --skill fluent-react-implementation

명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.

로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.

소스 파일 검토

설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.

SKILL.md

소스 지침 · 읽기 전용 미리보기

검색으로 돌아가기 설치로 돌아가기

cheap-lane-delegation

Route everyday, well-defined work (single-file edits, test-writing, summarization, mechanical refactors, boilerplate) to a cheaper coding agent (Grok or Copilot CLI) instead of doing it in the main Claude session, escalating multi-file/architecture/debugging/security work to Claude. Opt-in via the `cheap_lane:` comfort-posture knob.

2026-08-26

authoring-org-skills

Authors, validates and packages a claude.ai Organization Skill — the intake questions, the trigger and scope exercises, then lint, pack and verify against measured platform constraints. Reach for this when someone wants to publish a Skill to their organization, or when an upload was rejected and the reason is unclear.

2026-08-25

drafting-customer-replies

Drafts a reply to an inbound customer email, grounded in the account record and the published help-centre articles rather than in recall. Use when a customer emails about billing, a renewal or an outage, when a reply must cite current policy, or when a teammate asks for a first draft to edit.

2026-08-25

이 저장소의 모든 Skills 보기

name

fluent-react-implementation

description

Skill: fluent-react-implementation

The implementation playbook for building Fluent UI v9 + React websites and implementing a brand as a Fluent design language. Reference: ../../knowledge/fluent-react-for-web-2026.md (mechanics + dated version/SSR caveats), ../../knowledge/design-systems-and-component-architecture-2026.md (the headless-vs-styled framing — Fluent is the styled, themed choice).

When to use this (and when not)

Use when the project wants the Microsoft/Fluent aesthetic, or a themeable + accessible + batteries-included React component set you'll brand via tokens. Also for Power Pages React SPA front-ends in the Microsoft estate (see power-platform/knowledge/power-pages-2026.md).
Don't force Fluent on a radically bespoke brand that needs full visual control — use headless (Radix/React Aria) + your own tokens, or Tailwind v4 + shadcn. Theming Fluent into a wildly different look means fighting the system. (Traverse the design-systems "which component foundation?" decision tree first.)

The 7-step implementation arc

1. Confirm the foundation choice

Traverse the design-systems decision tree. If the answer is Fluent, proceed; otherwise hand back to the headless/Tailwind path. Pin the trio (@fluentui/react-components + React + the framework) to a verified-working set — Fluent v9 ⨉ React 19 / Next 15 has had real friction; check the live docs + microsoft/fluentui issues before locking versions, and record the versions with a retrieval date.

2. Brand → theme (the design-language core)

Take the brand color(s) → generate a BrandVariants 16-stop ramp (Fluent UI Theme Designer, or hand-tune).
createLightTheme(brand) + createDarkTheme(brand) → your light/dark themes; keep webHighContrastTheme for forced-colors.
Put the ramp + themes in a single theme/ module — the token source of truth. Override typography/radius/spacing tokens here where the brand diverges; never hardcode those in components.

3. Provider + SSR boundary

FluentProvider at the root with the active theme.
Next.js App Router: a providers.tsx with 'use client' (Griffel RendererProvider + SSRProvider + FluentProvider); app/layout.tsx stays a server component and wraps children. Emit critical CSS with renderToStyleElements per the current react.fluentui.dev recipe (verify — it changes across Next versions). Fluent v9 components are client components — they can't live in an RSC.
Astro/Vite: Fluent as client islands (client:load).
Dark mode: swap the theme prop; persist + honor prefers-color-scheme; set <body> background yourself (FluentProvider doesn't theme body — the classic gotcha).

4. Style with Griffel

makeStyles + mergeClasses, referencing tokens.* (semantic), never hex. Enable build-time extraction (@griffel/webpack-loader / babel preset) for production perf.

5. Compose custom components on Fluent primitives

Build on Fluent components + slots/composition (not prop-explosion). Only author bespoke primitives when Fluent lacks one. Keep the inherited a11y (keyboard/focus/ARIA) — don't override roles.

6. Storybook the themed system

Stories per component across light/dark/high-contrast; the living catalog + visual-regression + a11y addon. This is the design-language's documentation surface.

7. Verify

A11y (WCAG 2.2 AA floor — accessibility-review skill), Core Web Vitals incl. JS weight + INP (core-web-vitals-tuning skill — Fluent's CSS-in-JS has a cost; extraction + code-split), responsive/mobile-first, no-hardcoded-values (tokens only), SSR with no FOUC.

Output

The theme/ module (BrandVariants + themes), the provider/SSR setup, token-driven makeStyles, custom components, Storybook entries — plus the pinned, retrieval-dated version trio and any SSR-recipe caveat. Fill the ../../templates/design-system-spec.md with the Fluent specifics.

Hand-offs

Brand/visual ambiguity → visual-designer. A11y review → accessibility-auditor. CWV/JS-weight → performance-engineer. A Power Pages React SPA host → power-platform/power-pages-engineer. Custom (non-Fluent) headless build → stay in frontend-implementer with the design-systems skill.

fluent-react-implementation

소스 정보

설치 방법

소스 파일 검토

이 저장소의 다른 Skills

이 저장소의 다른 Skills

Skill: fluent-react-implementation

When to use this (and when not)

The 7-step implementation arc

1. Confirm the foundation choice

2. Brand → theme (the design-language core)

3. Provider + SSR boundary

4. Style with Griffel

5. Compose custom components on Fluent primitives

6. Storybook the themed system

7. Verify

Output

Hand-offs

Skill: fluent-react-implementation

When to use this (and when not)

The 7-step implementation arc

1. Confirm the foundation choice

2. Brand → theme (the design-language core)

3. Provider + SSR boundary

4. Style with Griffel

5. Compose custom components on Fluent primitives

6. Storybook the themed system

7. Verify

Output

Hand-offs