review-component
Skill162 starsChanged 13 days agoApache-2.0View on GitHub
Review a `bq-*` component against BEEQ guidelines and return a pass/fail report per category with fixes: structure, naming, JSDoc, props, accessibility, styling, tests and stories. Use before merging or when auditing a component. To fix accessibility issues specifically use fix-accessibility.
2 other projects use a version of this.
Adopted by
Most recently taken up by
- microsoft/fluentui-react-nativetheir own version, first seen Oct 20, 2026
- fangyuting/skillstheir own version, first seen Oct 11, 2026
Other versions2 projects use a version of this.
Word for word · 0
None found.
Edited · 0
None found.
Wrote their own version · 2
- microsoft/fluentui-react-native★ 1.4ksame name
- fangyuting/skills★ 1same name
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository10 other files it gives its agents.
- AGENTS.mdAGENTS.md
- create-componentSkill
- doc-componentSkill
- fix-accessibilitySkill
- pr-checklistSkill
- review-docSkill
- write-e2e-testsSkill
- write-storiesSkill
- write-unit-testsSkill
- beeqSkill
The file
We split this skill into the rules it gives an agent
3 rules. About 0 are common, 2 are distinctive, and 1 is very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈2
Distinctive · estimate
This author's own choices. Worth a look.
1
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Very specific: line 13
Before opening a PR for a new or modified bq-* component, or when reviewing such a PR.
- Distinctive: line 20
Read these before evaluating.
- Distinctive: line 30
Read every file of the component:
≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
Review a BEEQ Component
When to Use
- Before opening a PR for a new or modified
bq-*component, or when reviewing such a PR. - Auditing an existing component for guideline compliance, or when it "feels off" and needs a holistic check.
Procedure
1. Load the rules
Read these before evaluating. They are the only source of rules; this skill adds none:
- Components instructions
- Styles instructions
- Accessibility instructions
- Testing instructions
- write-stories for the Storybook rules
2. Read the component files
Read every file of the component:
bq-<name>.tsx: logicbq-<name>.types.ts: typesscss/bq-<name>.scssandscss/bq-<name>.variables.scss: styles and CSS custom properties__tests__/bq-<name>.e2e.tsx: e2e tests__storybook__/bq-<name>.stories.tsx: stories
Done when each file exists or its absence is recorded as an issue.
3. Evaluate each category
Apply every rule of the matching section to the files. Mark each category ✅ pass, ⚠️ needs improvement or ❌ fail, and list each violated rule with its location.
| Category | Rules to apply |
| File Structure | Component Structure Rules in components (section order and headers, render() last, shadow, formAssociated, private over #) |
| Naming | Code Conventions in components (tag, class, event, handler, constant and type names, BEM for SCSS) |
| JSDoc | Component JSDoc Block in components (component-level tags, @attr, @event, @slot, @part, @cssprop, props, methods) |
| Props & Events | Props, Validation and Forms in components (validation with @Watch(), defaults versus types, reflect, typed EventEmitter) |
| Accessibility | Every rule in the accessibility instructions |
| Styling | Every rule in the styles instructions, plus the scss/ layout and styleUrl from components |
| Tests | Every rule in the testing instructions, including a test for every prop, slot, event and public method |
| Storybook | Story rules in write-stories (import source, argTypes, state variants, Chromatic guard) |
Done when every category has a status.
4. Report format
## Component Review: bq-<name>
### Summary
<1-2 sentence overall assessment>
### Results
| Category | Status | Issues |
|---|---|---|
| File Structure | ✅/⚠️/❌ | ... |
| Naming | ✅/⚠️/❌ | ... |
| JSDoc | ✅/⚠️/❌ | ... |
| Props & Events | ✅/⚠️/❌ | ... |
| Accessibility | ✅/⚠️/❌ | ... |
| Styling | ✅/⚠️/❌ | ... |
| Tests | ✅/⚠️/❌ | ... |
| Storybook | ✅/⚠️/❌ | ... |
### Required Changes
<numbered list of blocking issues>
### Suggestions
<numbered list of non-blocking improvements>Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.