grommet
- 11 skills
- 0 followers
- 5 hours ago last updated
- ▌ Git Commit · grommetExecute git commit with conventional commit message analysis, intelligent staging, and message generation. Use when user asks to commit changes, create a git commit, or mentions "/commit". Supports: (1) Auto-detecting type and scope from changes, (2) Generating conventional commit messages from diff, (3) Interactive commit with optional type/scope/description overrides, (4) Intelligent file staging for logical grouping
- ▌ Instruction Writer 2 · grommetGuide users through creating high-quality .instructions.md files with clear scope, applyTo patterns, actionable rules, and related references.
- ▌ Grommet Component Styling · grommet bundleStyle Grommet components using styled-components and the Grommet theme system. Use when creating or modifying StyledComponentName.js files, adding or updating theme tokens in base.js and base.d.ts, applying disabledStyle or readOnlyStyle helpers, choosing t-shirt sizing values, or composing UI with Grommet primitives. Covers useThemeValue, styledComponentsConfig, passThemeFlag, normalizeColor, genericStyles, and theme namespace conventions.
- ▌ Grommet Component Testing · grommet bundleWrite tests and Storybook stories for Grommet components. Use when writing unit tests with @testing-library/react and jest-axe, setting up userEvent interactions, querying the DOM, or creating CSF-3 Storybook stories. Covers required axe accessibility checks as the first test, userEvent vs fireEvent guidance, query priority (getByRole first), Grommet wrapper requirement, snapshot usage, coverage targets, story file format, FormField integration stories, and CustomThemed stories.
- ▌ Grommet Component Contribution · grommet bundleBuild and contribute Grommet React components following official team conventions. Use when creating a new component from scratch, refactoring a component to align with Grommet conventions, preparing a PR for Grommet core contribution, or reviewing a component against acceptance criteria. Covers scaffolding, forwardRef, displayName, useThemeValue, FormContext, propTypes, TypeScript declarations, accessibility, i18n, and testing.
- ▌ Instruction Writer · grommetGuide users through creating high-quality .instructions.md files with clear scope, applyTo patterns, actionable rules, and related references.
- ▌ Prompt Builder · grommetGuide users through creating high-quality GitHub Copilot prompts with proper structure, tools, and best practices.
- ▌ Code Connect Intake · grommet bundleIntake workflow for HPE Design System Code Connect work. Use when asked to start a new Code Connect mapping, confirm a Figma node URL, identify the target Grommet component, choose the correct `.figma.jsx` file location, or gather the minimum inputs before editing `knowledge/code-connect/src/`.
- ▌ Code Connect Authoring · grommet bundleAuthoring workflow for HPE Design System Code Connect mappings. Use when asked to create or update a `.figma.jsx` file, translate Figma properties into `figma.connect(...)`, choose between `props`, `variant`, or static composition patterns, or mirror a Grommet component API in `knowledge/code-connect/src/`.
- ▌ Code Connect Drift Audit · grommet bundleAudit workflow for HPE Design System Code Connect drift. Use when asked to review an existing `.figma.jsx` mapping, compare mapping props against the current component API, detect stale imports or patterns, check whether Figma properties are still represented correctly, or find gaps before sync.
- ▌ Code Connect Sync Troubleshooter · grommet bundleTroubleshooting workflow for HPE Design System Code Connect publish and validation failures. Use when `pnpm --filter @hpe-design/code-connect figma:sync` fails, when a mapping validates locally but does not publish as expected, or when token setup, node type, parser restrictions, or mapping shape might be blocking sync.