# AI use cases for Bricks (kostja94/bricks)

Repo: [kostja94/bricks](https://github.com/kostja94/bricks) | Use cases: 4 | Page: https://dedupedai.com/use-cases/kostja94-bricks/

Bricks is an open-source component layer that gives coding agents implementation-aware contracts for building interface components that fit an existing project.

This file holds every use case of this repo. Each one starts with a "## " heading and ends with its URL.

- Build a project-native footer for a SaaS site: https://dedupedai.com/use-cases/kostja94-bricks/build-project-native-footer/
- Design an agent task input with full states: https://dedupedai.com/use-cases/kostja94-bricks/design-agent-task-input-states/
- Build an accessible FAQ section in an existing app: https://dedupedai.com/use-cases/kostja94-bricks/build-accessible-faq-section/
- Check a Bricks reference edit before merging: https://dedupedai.com/use-cases/kostja94-bricks/validate-bricks-reference-edits/

## How to build a project-native footer for a SaaS site with Bricks

Repo: [kostja94/bricks](https://github.com/kostja94/bricks) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README

Have an agent build a footer that reuses your primitives and links only to real destinations.

**Who it is for:** A frontend developer on a bilingual SaaS marketing site who needs a footer that matches the existing routes and design tokens.

**The problem:** A generated footer often invents routes, imports a second design system, and skips keyboard checks.

**The outcome:** A footer component built inside the real project, with links to actual product, resource, company, and legal destinations and keyboard access checked on mobile and desktop.

### Steps

1. Install the skill with `npx skills add kostja94/bricks --skill component-builder`.
2. Tell the agent to read the existing routes, components, design tokens, framework, and responsive conventions before writing code.
3. Ask the agent to reuse the project's primitives and include only the real product, resource, company, and legal destinations.
4. Check keyboard access on mobile and desktop inside the actual page, not in an isolated preview.

### Prompt to paste into your agent

```text
Use the component-builder skill from kostja94/bricks to build the footer for <target project>. Read the existing routes, components, tokens, and framework first, reuse project primitives, and list the file paths you changed. Verify that every footer link points to a real route in the project and that keyboard access works on mobile and desktop.
```

### Caveat

Bricks says it does not claim accessibility, performance, or conversion outcomes that were not verified in the target project, so keyboard and link checks are your job.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/kostja94-bricks/build-project-native-footer/

## How to design an agent task input with full states with Bricks

Repo: [kostja94/bricks](https://github.com/kostja94/bricks) | Difficulty: Advanced | Time: 45 minutes | Basis: From the README

Get a Task Input component that covers loading, cancellation, invalid input, and recovery.

**Who it is for:** A product engineer adding an AI task box to an internal tool who needs the component to handle failures, not only the happy path.

**The problem:** Agent-generated task inputs often omit loading, cancellation, invalid input, or result recovery.

**The outcome:** A Task Input component with the expected interaction states, built from the project's own primitives and checked inside its real page.

### Steps

1. Install the skill with `npx skills add kostja94/bricks --skill component-builder`.
2. Describe the task surface and where the input sits in the existing page or workspace.
3. Have the agent load the Task Input reference and list the states it will implement before coding.
4. Review the states for loading, cancellation, invalid input, and result recovery, then ask for the verified build.

### Prompt to paste into your agent

```text
Use the component-builder skill from kostja94/bricks to build a Task Input for <target project>. Cover loading, cancellation, invalid input, and result recovery, reusing the project's existing primitives. Verify the component inside its real page and report which states were tested.
```

### Caveat

The README gives Task Input as an example of a component that needs these states, but it does not provide a ready-made agent backend, so you still wire the behavior to your own tools.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/kostja94-bricks/design-agent-task-input-states/

## How to build an accessible FAQ section in an existing app with Bricks

Repo: [kostja94/bricks](https://github.com/kostja94/bricks) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README

Add an FAQ section where answers stay readable to assistive technology.

**Who it is for:** A web developer adding a help or pricing FAQ to a product page who wants answers that screen readers can reach.

**The problem:** A generated FAQ may hide answers from assistive technology or ignore the page's existing component patterns.

**The outcome:** An FAQ Section built from the project's own primitives, with answers reachable by keyboard and assistive technology, verified on the real page.

### Steps

1. Install the skill with `npx skills add kostja94/bricks --skill component-builder`.
2. Point the agent at the page, nearby components, and existing tokens so it reuses the project's patterns.
3. Ask the agent to load the FAQ Section reference and choose a variant from the real questions and answers.
4. Verify keyboard and assistive technology access on the real page before accepting the component.

### Prompt to paste into your agent

```text
Use the component-builder skill from kostja94/bricks to build an FAQ Section for <target page> in <target project>. Reuse the project's existing primitives and choose a variant from the real questions. Verify that every answer is reachable by keyboard and assistive technology, and list the files changed.
```

### Caveat

Bricks gives guidance on accessibility but does not verify it for you, so test answer access in the target project.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/kostja94-bricks/build-accessible-faq-section/

## How to check a Bricks reference edit before merging with Bricks

Repo: [kostja94/bricks](https://github.com/kostja94/bricks) | Difficulty: Intermediate | Time: 15 minutes | Basis: From the README

Run the Bricks validation suite after changing a component reference.

**Who it is for:** A contributor or maintainer of the Bricks repo who edits a component reference or the catalog and needs to confirm the changes pass the checks.

**The problem:** Edits to references, the catalog, or the schema can break paths or expectations without an obvious signal.

**The outcome:** A clear pass or fail report from the Bricks validation suite, with any broken catalog entries, reference paths, or schema expectations identified.

### Steps

1. Clone the kostja94/bricks repository and open it in your terminal.
2. Make your edit under skills/component-builder/references/ or update catalog/components.json.
3. Run `npm test` from the repository root.
4. Fix any reported catalog, reference path, schema, or Skill failures and run the command again.

### Prompt to paste into your agent

```text
In the kostja94/bricks repository at <local path>, edit the reference for <component name> under skills/component-builder/references/components/, then run npm test. Report each failure with its file path and the fix you made, and confirm the final run passes.
```

### Caveat

The validation suite checks catalog, paths, schema, and Skill structure, not whether a component design works in any particular product.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/kostja94-bricks/validate-bricks-reference-edits/