feature: QrCode component
#4394
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| --- | ||
| name: create-functional-component | ||
| description: Create Skeleton functional components in both React and Svelte packages using the repository's anatomy/modules conventions. | ||
| --- | ||
|
|
||
| # Create Functional Component | ||
|
|
||
| Scaffold a new framework component in both Skeleton packages using the existing anatomy/modules authoring style. | ||
|
|
||
| ## Where things live | ||
|
|
||
| - React components: [packages/skeleton-react/src/components/](packages/skeleton-react/src/components/) | ||
| - Svelte components: [packages/skeleton-svelte/src/components/](packages/skeleton-svelte/src/components/) | ||
| - React component tests: [packages/skeleton-react/test/components/](packages/skeleton-react/test/components/) | ||
| - Svelte component tests: [packages/skeleton-svelte/test/components/](packages/skeleton-svelte/test/components/) | ||
| - Public package exports: [packages/skeleton-react/src/index.ts](packages/skeleton-react/src/index.ts), [packages/skeleton-svelte/src/index.ts](packages/skeleton-svelte/src/index.ts) | ||
| - Reference components to model after: | ||
| - Static/non-machine: [app-bar](packages/skeleton-react/src/components/app-bar/index.ts), [app-bar](packages/skeleton-svelte/src/components/app-bar/index.ts) | ||
| - Machine-backed: [accordion](packages/skeleton-react/src/components/accordion/index.ts), [accordion](packages/skeleton-svelte/src/components/accordion/index.ts) | ||
|
|
||
| ## File destination rules | ||
|
|
||
| Recommend structure based on component complexity, explain the reasoning, accept overrides. | ||
|
|
||
| - **Simple/static component** → create `anatomy/*`, `modules/anatomy.ts`, and `index.ts` in both framework folders. | ||
| - **Machine-backed component** → add provider/context modules in both frameworks: | ||
| - React: `modules/provider.ts`, context files as needed. | ||
| - Svelte: `modules/provider.svelte.ts`, context files as needed. | ||
| - **Always mirror APIs** across React and Svelte (part names, prop interface names, namespace members). | ||
|
|
||
| ## Conventions (from app-bar / accordion / dialog) | ||
|
|
||
| - Folder is kebab-case; exported namespace is PascalCase (`app-bar` -> `AppBar`). | ||
| - Keep anatomy/modules split: | ||
| - `anatomy/*` = renderable parts | ||
| - `modules/*` = context/providers/namespace composition | ||
| - `index.ts` = type exports + namespace export | ||
| - Use `PropsWithElement` + `HTMLAttributes` in part prop interfaces. | ||
| - Build attributes with `mergeProps` and render with element override fallback. | ||
| - React anatomy files are `.tsx`; `index.ts` type exports reference `.jsx` paths. | ||
| - Svelte anatomy files are `.svelte`; interfaces are in `<script lang="ts" module>`. | ||
| - Namespace composition uses `Object.assign(Root, { ...parts })` in `modules/anatomy.ts`. | ||
| - For static parts, include `data-scope` and `data-part` attributes. | ||
|
|
||
| ## Prompt flow | ||
|
|
||
| Ask one at a time, confirm each, write nothing until all are answered and the user confirms. | ||
|
|
||
| 1. **Component name** — kebab-case folder and PascalCase namespace. Recommend both, accept overrides. | ||
| 2. **Type** — static/simple or machine-backed (Zag). This resolves required module files. | ||
| 3. **Parts list** — root-only or full anatomy list (`root`, `trigger`, `content`, etc.). | ||
|
Contributor
There was a problem hiding this comment. Step 3 and 4 feels like something the LLM could likely suggest for us if provided the documentation mentioned above. Just accept user overrides. |
||
| 4. **Elements per part** — default HTML tag for each part (`div`, `button`, `header`, etc.). | ||
| 5. **Exports** — whether to include `Provider`, `Context`, and `useX` public exports. | ||
| 6. **Confirm** — show planned file tree for both frameworks and namespace API before writing. | ||
|
|
||
| ## After scaffolding | ||
|
|
||
| 1. Add new component re-exports to [packages/skeleton-react/src/index.ts](packages/skeleton-react/src/index.ts) and [packages/skeleton-svelte/src/index.ts](packages/skeleton-svelte/src/index.ts). | ||
| 2. Keep export ordering consistent with neighboring component entries. | ||
| 3. Add tests in both frameworks: | ||
|
|
||
| - React fixture: `packages/skeleton-react/test/components/<component>.tsx` | ||
| - React suite: `packages/skeleton-react/test/components/<component>.test.tsx` | ||
| - Svelte fixture: `packages/skeleton-svelte/test/components/<component>.svelte` | ||
| - Svelte suite: `packages/skeleton-svelte/test/components/<component>.test.ts` | ||
|
|
||
| 4. For each anatomy part, include a render assertion (`toBeInTheDocument`). | ||
| 5. If the component should be previewable in the playgrounds, add matching demo entries in both frameworks and regenerate the React route manifest if a new route was added. | ||
|
Contributor
There was a problem hiding this comment. Nothing prompts the user if playground should be created, so might be worth being a default on, user opt-out? |
||
| 6. If requested, trigger `/create-doc` using the new component slug for framework docs scaffolding. | ||
|
|
||
| ## Final summary | ||
|
|
||
| List: files created in each framework, namespace members exported, provider/context/hook files added (if any), top-level index exports added, and test files/coverage added (including prop delegation). | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| --- | ||
| name: create-playground-entry | ||
| description: Create or update Skeleton React and Svelte playground component pages for a given component, including route generation steps. | ||
| --- | ||
|
|
||
| # Create Playground Entry | ||
|
|
||
| Create playground pages for a component in one or both playground apps. | ||
|
|
||
| Use this when a component needs a hands-on demo page under `components/<slug>` in: | ||
|
|
||
| - [playgrounds/skeleton-react/](playgrounds/skeleton-react/) | ||
| - [playgrounds/skeleton-svelte/](playgrounds/skeleton-svelte/) | ||
|
|
||
| ## Where things live | ||
|
|
||
| - React playground routes: [playgrounds/skeleton-react/src/routes/components/](playgrounds/skeleton-react/src/routes/components/) | ||
| - Svelte playground routes: [playgrounds/skeleton-svelte/src/routes/components/](playgrounds/skeleton-svelte/src/routes/components/) | ||
| - React route shell and nav list source: [playgrounds/skeleton-react/src/routes/\_\_root.tsx](playgrounds/skeleton-react/src/routes/__root.tsx) | ||
| - Svelte route shell and nav list source: [playgrounds/skeleton-svelte/src/routes/+layout.svelte](playgrounds/skeleton-svelte/src/routes/+layout.svelte) | ||
|
|
||
| ## Important behavior | ||
|
|
||
| - Both playgrounds auto-build the component nav from filesystem globs in their root layouts. | ||
| - Adding a route file in the right folder is enough to make it appear in the sidebar. | ||
|
|
||
| ## File destination rules | ||
|
|
||
| Recommend destination from component slug and target framework(s), explain why, then accept overrides. | ||
|
|
||
| - Component slug `my-component`: | ||
| - React file: `playgrounds/skeleton-react/src/routes/components/my-component/index.tsx` | ||
| - Svelte file: `playgrounds/skeleton-svelte/src/routes/components/my-component/+page.svelte` | ||
| - Usually create both files for framework components. | ||
| - If the component exists in only one framework, create only that framework's playground page. | ||
|
|
||
| ## Conventions (from existing playground entries) | ||
|
|
||
| - Route folder is kebab-case and mirrors component slug. | ||
| - React files: | ||
| - Include `'use client';` | ||
| - Import component(s) from `@skeletonlabs/skeleton-react` | ||
| - Export `Route` with `createFileRoute('/components/<slug>/')` | ||
| - Define `function Page()` and return demo JSX | ||
| - Svelte files: | ||
| - Start with `<script lang="ts">` | ||
| - Import component(s) from `@skeletonlabs/skeleton-svelte` | ||
| - Exported route is filesystem-based (`+page.svelte`), no explicit route helper | ||
| - Use matching demo structure with idiomatic Svelte syntax | ||
| - Demo scope should be aligned across frameworks for parity. | ||
|
|
||
| Reference files: | ||
|
|
||
| - Simple: [playgrounds/skeleton-react/src/routes/components/accordion/index.tsx](playgrounds/skeleton-react/src/routes/components/accordion/index.tsx), [playgrounds/skeleton-svelte/src/routes/components/accordion/+page.svelte](playgrounds/skeleton-svelte/src/routes/components/accordion/+page.svelte) | ||
| - Multi-section: [playgrounds/skeleton-react/src/routes/components/carousel/index.tsx](playgrounds/skeleton-react/src/routes/components/carousel/index.tsx), [playgrounds/skeleton-svelte/src/routes/components/carousel/+page.svelte](playgrounds/skeleton-svelte/src/routes/components/carousel/+page.svelte) | ||
|
|
||
| ## Prompt flow | ||
|
|
||
| Ask one at a time, confirm each answer, write nothing until all are answered and the user confirms. | ||
|
|
||
| 1. **Component slug** - kebab-case route segment (for example `floating-panel`). | ||
|
Contributor
There was a problem hiding this comment. When folks are using LLMs they're going to likely use natural language and write "Floating Panel" or "floating panel" or " I want to add a floating panel component". So allow any input, but let the LLM coerce to specific kabab format here. Again user confirmation is good. Same deal for the other skill btw. |
||
| 2. **Framework targets** - `react`, `svelte`, or both (recommend both when the component exists in both packages). | ||
| 3. **Demo scope** - minimal single example or multi-section showcase. | ||
| 4. **Feature coverage** - list the states/variants/interactions to include. | ||
| 5. **Parity level** - strict parity or framework-idiomatic differences. | ||
| 6. **Confirm** - show planned files and summarize route/codegen actions before writing. | ||
|
|
||
| ## After scaffolding | ||
|
|
||
| 1. Ensure the route files compile in each target playground. | ||
| 2. Regenerate React route tree after new or renamed React route files: | ||
| - `pnpm --filter @skeletonlabs/playground-skeleton-react exec tsr generate` | ||
| 3. If requested, run checks: | ||
| - React: `pnpm --filter @skeletonlabs/playground-skeleton-react run check` | ||
| - Svelte: `pnpm --filter @skeletonlabs/playground-skeleton-svelte run check` | ||
|
|
||
| ## Final summary | ||
|
|
||
| List: framework targets, files created/updated, whether React route generation was run, and any intentional parity differences between React and Svelte demos. | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks awesome. Only bit of feedback is perhaps prompt users for a Zag documentation URL. Then notify the LLM here how to convert to the machine-friendly version:
You might even try and include the Github source for the component using a similar pattern, so it can have a deep level of understanding of how this operates.
Just to make this an explicit part of the user<->llm transaction upfront.