Skip to content

Commit 5d12cc8

Browse files
dmytrokirpadmytrokirpa
committed
feat(public-doscite-v9,storybook-llms-exstractor): add Working with AI section and agent skills for Fluent UI React v9
1 parent f17bb7e commit 5d12cc8

File tree

9 files changed

+642
-12
lines changed

9 files changed

+642
-12
lines changed

‎apps/public-docsite-v9/assets/SKILL.md‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
# Fluent UI React v9 Skill
2+
3+
Fluent UI React v9 is Microsoft's official React component library implementing the Fluent Design System. This skill provides comprehensive documentation for 100+ production-ready components, theming, accessibility, and migration guides.
4+
5+
## Installation
6+
7+
```bash
8+
npm install @fluentui/react-components
9+
10+
# or
11+
12+
yarn add @fluentui/react-components
13+
```
14+
15+
## Quick Start
16+
17+
```tsx
18+
import { FluentProvider, webLightTheme, Button } from '@fluentui/react-components';
19+
20+
function App() {
21+
return (
22+
<FluentProvider theme={webLightTheme}>
23+
<Button appearance="primary">Click me</Button>
24+
</FluentProvider>
25+
);
26+
}
27+
```
28+
29+
## Documentation Structure
30+
31+
The documentation is organized into these categories:
32+
33+
### 1. Components (components-\*)
34+
35+
Browse component documentation by searching for `components-[name]` files. Each component includes:
36+
37+
- Props and API reference
38+
- Multiple usage examples with code
39+
- Best practices and accessibility guidelines
40+
- Common patterns and variations
41+
42+
**Common components**: Button, Input, Dialog, Menu, Dropdown, Checkbox, RadioGroup, Table, DataGrid, Accordion, Avatar, Badge, Card, Combobox, Divider, Label, Link, MessageBar, Popover, Select, Spinner, Switch, Tabs, Tag, Textarea, Toast, Toolbar, Tooltip, Tree
43+
44+
### 2. Concepts (concepts-\*)
45+
46+
Foundational documentation covering:
47+
48+
- **Quick Start** (concepts-developer-quick-start): Getting started guide
49+
- **Styling** (concepts-developer-styling-components): How to style components with Griffel CSS-in-JS
50+
- **Theming** (concepts-developer-theming): Customizing themes and design tokens
51+
- **Positioning** (concepts-developer-positioning-components): Positioning utilities
52+
- **SSR** (concepts-developer-server-side-rendering-\*): Next.js, Remix, React Router setup
53+
- **Accessibility** (concepts-developer-accessibility-\*): WCAG 2.1 AA patterns and best practices
54+
- **Advanced** (concepts-developer-advanced-\*): Advanced configuration, styling techniques, slots
55+
56+
### 3. Migration Guides (concepts-migration-\*)
57+
58+
Step-by-step migration guides:
59+
60+
- **From v8**: Component mapping, color mapping, breaking changes
61+
- **From v0 (Northstar)**: Component-by-component migration guides
62+
- Search for specific components: `concepts-migration-from-v8-components-[name]-migration`
63+
64+
### 4. Utilities (utilities-\*)
65+
66+
Helper utilities for focus management, theme utilities, and more.
67+
68+
### 5. Motion (motion-\*)
69+
70+
Animation components and APIs for creating smooth transitions and effects.
71+
72+
## How to Use This Skill
73+
74+
### Finding Component Documentation
75+
76+
1. **To use a component**: Search for `components-[component-name]` (e.g., `components-button`)
77+
2. **For subcomponents**: Search for `components-[parent]-[child]` (e.g., `components-table-tablecell`)
78+
3. **Read the props table**: Every component doc includes comprehensive props with types, defaults, and descriptions
79+
4. **Review examples**: Multiple examples show common usage patterns
80+
81+
### Common Tasks
82+
83+
**Styling a component:**
84+
85+
```tsx
86+
import { makeStyles, Button } from '@fluentui/react-components';
87+
88+
const useStyles = makeStyles({
89+
customButton: {
90+
backgroundColor: 'red',
91+
':hover': { backgroundColor: 'darkred' },
92+
},
93+
});
94+
95+
function MyButton() {
96+
const styles = useStyles();
97+
return <Button className={styles.customButton}>Styled Button</Button>;
98+
}
99+
```
100+
101+
See: concepts-developer-styling-components
102+
103+
**Creating a custom theme:**
104+
105+
```tsx
106+
import { FluentProvider, createLightTheme, BrandVariants } from '@fluentui/react-components';
107+
108+
const myBrand: BrandVariants = {
109+
10: '#020305', // ... define all tokens
110+
};
111+
112+
const myTheme = createLightTheme(myBrand);
113+
```
114+
115+
See: concepts-developer-theming
116+
117+
**Migrating from v8:**
118+
119+
1. Check component mapping: concepts-migration-from-v8-component-mapping
120+
2. Find specific migration guide: concepts-migration-from-v8-components-[name]-migration
121+
3. Review breaking changes: concepts-migration-handling-breaking-changes
122+
123+
**SSR Setup:**
124+
125+
- Next.js App Router: concepts-developer-server-side-rendering-next-js-appdir-setup
126+
- Next.js Pages: concepts-developer-server-side-rendering-next-js-pages-setup
127+
- React Router/Remix: concepts-developer-server-side-rendering-react-router-7-and-remix-setup
128+
129+
**Accessibility:**
130+
131+
- Component labelling: concepts-developer-accessibility-component-labelling
132+
- Focus indicators: concepts-developer-accessibility-focus-indicator
133+
- Component-specific a11y: concepts-developer-accessibility-components-[name]
134+
135+
## Best Practices
136+
137+
1. **Always wrap your app in FluentProvider** with a theme
138+
2. **Use semantic HTML**: Fluent components use proper ARIA attributes
139+
3. **Prefer built-in variants**: Use `appearance`, `size`, `shape` props before custom styling
140+
4. **Follow WCAG 2.1 AA**: All components are compliant by default, maintain this in customizations
141+
5. **Use design tokens**: Reference theme tokens instead of hard-coding colors
142+
6. **Test SSR**: If using SSR, follow framework-specific setup guides
143+
144+
## When to Use This Skill
145+
146+
- Building React applications with Fluent UI
147+
- Implementing Microsoft Fluent Design System
148+
- Migrating from @fluentui/react (v8) or @fluentui/react-northstar (v0)
149+
- Need accessible, themeable UI components
150+
- Working with Next.js, Remix, or React Router SSR
151+
- Customizing Microsoft design language
152+
- Building enterprise React applications

‎apps/public-docsite-v9/src/Concepts/WorkingWithAI.mdx‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import { Meta } from '@storybook/addon-docs/blocks';
2+
3+
<Meta title="Concepts/Developer/Working with AI" />
4+
5+
# Working with AI
6+
7+
Learn how to use Fluent UI React v9 documentation with AI coding assistants.
8+
9+
## Documentation Access
10+
11+
### Primary Entry Point
12+
13+
**[llms.txt](https://storybooks.fluentui.dev/react/llms.txt)** - Comprehensive index following the [llms.txt standard](https://llmstxt.org/)
14+
15+
Includes documentation for:
16+
17+
- 100+ React components with full API references
18+
- Theming, styling, positioning, and SSR guides
19+
- Accessibility patterns and WCAG 2.1 AA compliance
20+
- Migration guides from v8 and v0
21+
- Motion, animation, and utility hooks
22+
23+
### Direct Markdown Access
24+
25+
Every documentation page includes a **"Copy Markdown"** button. Alternatively, access any page as a static file:
26+
27+
**Format:** `https://storybooks.fluentui.dev/react/llms/{page-name}.md`
28+
29+
**Examples:**
30+
31+
- `https://storybooks.fluentui.dev/react/llms/components-button-button.md`
32+
- `https://storybooks.fluentui.dev/react/llms/concepts-developer-theming.md`
33+
34+
## Integration by Tool
35+
36+
### GitHub Copilot
37+
38+
Copilot learns from code patterns in your workspace. Add context through imports and comments:
39+
40+
```tsx
41+
// Fluent UI v9 Button: appearance (primary | secondary | outline | subtle | transparent)
42+
// size (small | medium | large)
43+
import { Button } from '@fluentui/react-components';
44+
45+
function MyComponent() {
46+
return <Button appearance="primary">Click me</Button>;
47+
}
48+
```
49+
50+
### Claude Code CLI
51+
52+
Install the Fluent UI skill for instant documentation access:
53+
54+
```bash
55+
npx skills add https://storybooks.fluentui.dev/react
56+
```
57+
58+
### Cursor
59+
60+
Reference documentation using `@Docs`:
61+
62+
```
63+
@Docs https://storybooks.fluentui.dev/react/llms.txt
64+
How do I create a Dialog with a custom close button?
65+
```
66+
67+
### Windsurf
68+
69+
Add to `.windsurfrules` for persistent access:
70+
71+
```
72+
Use Fluent UI React v9 documentation: https://storybooks.fluentui.dev/react/llms.txt
73+
```
74+
75+
Or reference directly with `@`:
76+
77+
```
78+
@https://storybooks.fluentui.dev/react/llms.txt
79+
```
80+
81+
### ChatGPT and Claude
82+
83+
Include the documentation URL in your conversation:
84+
85+
```
86+
I'm using Fluent UI React v9 (@fluentui/react-components).
87+
Documentation: https://storybooks.fluentui.dev/react/llms.txt
88+
89+
How do I create a custom theme with brand colors?
90+
```
91+
92+
### Agent Skills Discovery
93+
94+
For agents supporting the [Agent Skills Discovery RFC](https://github.com/cloudflare/agent-skills-discovery-rfc):
95+
96+
```
97+
https://storybooks.fluentui.dev/react/.well-known/skills/index.json
98+
```
99+
100+
## Best Practices
101+
102+
When prompting AI tools:
103+
104+
- **Specify the version**: Always mention "Fluent UI React v9" or "@fluentui/react-components"
105+
- **Provide context**: Include your React version, framework (Next.js, Vite), and SSR requirements
106+
- **Request complete examples**: Ask for full implementations with imports, not just snippets
107+
- **Consider accessibility**: Ask about ARIA props and keyboard navigation requirements
108+
109+
## Resources
110+
111+
Documentation is automatically updated with each release.
112+
113+
- **Storybook**: [storybooks.fluentui.dev/react](https://storybooks.fluentui.dev/react)
114+
- **Official Docs**: [react.fluentui.dev](https://react.fluentui.dev)
115+
- **GitHub**: [microsoft/fluentui](https://github.com/microsoft/fluentui)
116+
- **Issues**: [github.com/microsoft/fluentui/issues](https://github.com/microsoft/fluentui/issues)

‎apps/public-docsite-v9/storybook-llms.config.js‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
// @ts-check
22

3+
const fs = require('node:fs');
4+
const path = require('node:path');
35
const storybookConfig = require('./.storybook/main');
46

7+
const skillContent = fs.readFileSync(path.join(__dirname, 'assets/SKILL.md'), 'utf-8');
8+
59
/**
610
* Config for the LLMs docs generator script.
711
* @see {@link file://./../../tools/storybook-llms-extractor/src/cli.ts}
@@ -10,9 +14,31 @@ const storybookConfig = require('./.storybook/main');
1014
*/
1115
module.exports = {
1216
distPath: './dist/react',
13-
summaryBaseUrl: 'https://storybooks.fluentui.dev/react/',
17+
summaryBaseUrl: 'https://storybooks.fluentui.dev/react',
1418
summaryTitle: 'Fluent UI React v9',
1519
summaryDescription:
1620
"Fluent UI React is a library of React components that implement Microsoft's [Fluent Design System](https://fluent2.microsoft.design).",
21+
summaryFormat: {
22+
maxDescriptionLength: 120,
23+
categoryOrder: [
24+
'Concepts',
25+
'Components',
26+
'Compat Components',
27+
'Preview Components',
28+
'Theme',
29+
'Icons',
30+
'Motion',
31+
'Utilities',
32+
'Migration Shims',
33+
],
34+
maxNestingLevels: 2,
35+
flattenCategories: ['Components', 'Compat Components', 'Preview Components', 'Theme', 'Icons'],
36+
},
37+
agentSkill: {
38+
name: 'fluent-ui-react-v9',
39+
description:
40+
"Comprehensive documentation for Fluent UI React v9 - Microsoft's official React component library implementing Fluent Design System. Covers 100+ production-ready components (Button, Dialog, Menu, Table, DataGrid, etc.), theming system with design tokens, accessibility patterns (WCAG 2.1 AA compliant), migration guides from v8/v0, styling with Griffel CSS-in-JS, positioning utilities, motion/animation components, SSR support (Next.js, Remix, React Router), and development best practices. Use when working with: fluent ui, react components, microsoft design, fluent design system, @fluentui/react-components, ui component library, accessible components, design tokens, theme customization, migration from v8 or v0.",
41+
content: skillContent,
42+
},
1743
refs: storybookConfig.refs ? Object.values(storybookConfig.refs) : [],
1844
};

0 commit comments

Comments
 (0)