element', () => { const { container } = render(Section); expect(container.querySelector('section')).toBeTruthy(); }); it('applies ochre background by default', () => { const { container } = render(Section); expect(container.querySelector('section')?.className).toContain('bg-ochre-clay'); }); it('applies brutal border when bordered=true', () => { const { container } = render(Section, { props: { bordered: true } }); const cls = container.querySelector('section')?.className ?? ''; expect(cls).toContain('brutal-border-top'); expect(cls).toContain('brutal-border-bottom'); }); }); ``` **Step 3: Run test — expect FAIL** ```bash cd /home/ilia/Documents/Projects/allmywork bun run test src/shared/ui/Section/Section.test.ts ``` **Step 4: Implement Section.svelte** ```svelte

{#if children} {@render children()} {/if}

``` **Step 5: Implement Container.svelte** ```svelte

{#if children} {@render children()} {/if}

``` **Step 6: Create index.ts** ```typescript export { default as Section } from './Section.svelte'; export { default as Container } from './Container.svelte'; export type { SectionBackground, ContainerSize } from './types'; ``` **Step 7: Run test — expect PASS** ```bash cd /home/ilia/Documents/Projects/allmywork bun run test src/shared/ui/Section/Section.test.ts ``` **Step 8: Update shared/ui/index.ts** — append: ```typescript export * from './Section'; ``` **Step 9: Write Section.stories.svelte** ```svelte {#snippet template()}

Section content

{/snippet} {#snippet template()}

Section content on slate

{/snippet} {#snippet template()}

Section with brutal top and bottom borders

{/snippet} ``` **Step 10: Commit** ```bash cd /home/ilia/Documents/Projects/allmywork git add src/shared/ui/Section/ src/shared/ui/index.ts git commit -m "feat(shared/ui): add Section and Container components with layout presets" ``` --- ## Task 8: Implement `Input` and `Textarea` components **Files:** - Create: `/home/ilia/Documents/Projects/allmywork/src/shared/ui/Input/types.ts` - Create: `/home/ilia/Documents/Projects/allmywork/src/shared/ui/Input/Input.svelte` - Create: `/home/ilia/Documents/Projects/allmywork/src/shared/ui/Input/Textarea.svelte` - Create: `/home/ilia/Documents/Projects/allmywork/src/shared/ui/Input/index.ts` - Create: `/home/ilia/Documents/Projects/allmywork/src/shared/ui/Input/Input.stories.svelte` **Reference prototype:** `/home/ilia/Downloads/High-End Portfolio Design System(1)/src/app/components/Input.tsx` **Step 1: Create types.ts** ```typescript // No custom types needed beyond HTML attributes; file reserved for future extension. export type InputSize = 'sm' | 'md' | 'lg'; ``` **Step 2: Write failing test** Create `/home/ilia/Documents/Projects/allmywork/src/shared/ui/Input/Input.test.ts`: ```typescript import { render } from '@testing-library/svelte'; import { describe, expect, it } from 'vitest'; import Input from './Input.svelte'; describe('Input', () => { it('renders an element', () => { const { container } = render(Input); expect(container.querySelector('input')).toBeTruthy(); }); it('renders label when label prop is set', () => { const { getByText } = render(Input, { props: { label: 'Email' } }); expect(getByText('Email')).toBeTruthy(); }); it('renders error message when error prop is set', () => { const { getByText } = render(Input, { props: { error: 'Required' } }); expect(getByText('Required')).toBeTruthy(); }); }); ``` **Step 3: Run test — expect FAIL** ```bash cd /home/ilia/Documents/Projects/allmywork bun run test src/shared/ui/Input/Input.test.ts ``` **Step 4: Implement Input.svelte** ```svelte

{#if label} {label} {/if} {#if error} {error} {/if}

``` **Step 5: Implement Textarea.svelte** ```svelte

{#if label} {label} {/if} {#if error} {error} {/if}

``` **Step 6: Create index.ts** ```typescript export { default as Input } from './Input.svelte'; export { default as Textarea } from './Textarea.svelte'; export type { InputSize } from './types'; ``` **Step 7: Run test — expect PASS** ```bash cd /home/ilia/Documents/Projects/allmywork bun run test src/shared/ui/Input/Input.test.ts ``` **Step 8: Update shared/ui/index.ts** — append: ```typescript export * from './Input'; ``` **Step 9: Write Input.stories.svelte** ```svelte {#snippet template()} {/snippet} {#snippet template()} {/snippet} {#snippet template()} {/snippet} {#snippet template()} {/snippet} {#snippet template()}

{/snippet}
</Story>

<Story name="Textarea with Error">
    {#snippet template()}
        <Textarea label="Message" error="Message is required." />
    {/snippet}
</Story>
```

**Step 10: Commit**

```bash
cd /home/ilia/Documents/Projects/allmywork
git add src/shared/ui/Input/ src/shared/ui/index.ts
git commit -m "feat(shared/ui): add Input and Textarea components with label and error states"
```

---

## Task 9: Implement `TechStackBrick` component

**Files:**
- Create: `/home/ilia/Documents/Projects/allmywork/src/shared/ui/TechStackBrick/TechStackBrick.svelte`
- Create: `/home/ilia/Documents/Projects/allmywork/src/shared/ui/TechStackBrick/TechStackGrid.svelte`
- Create: `/home/ilia/Documents/Projects/allmywork/src/shared/ui/TechStackBrick/index.ts`
- Create: `/home/ilia/Documents/Projects/allmywork/src/shared/ui/TechStackBrick/TechStackBrick.stories.svelte`

**Reference prototype:** `/home/ilia/Downloads/High-End Portfolio Design System(1)/src/app/components/TechStackBrick.tsx`

**Step 1: Write failing test**

Create `/home/ilia/Documents/Projects/allmywork/src/shared/ui/TechStackBrick/TechStackBrick.test.ts`:

```typescript
import { render } from '@testing-library/svelte';
import { describe, expect, it } from 'vitest';
import TechStackBrick from './TechStackBrick.svelte';

describe('TechStackBrick', () => {
    it('renders the skill name', () => {
        const { getByText } = render(TechStackBrick, { props: { name: 'SvelteKit' } });
        expect(getByText('SvelteKit')).toBeTruthy();
    });

it('uppercases the skill name via CSS class', () => {
        const { container } = render(TechStackBrick, { props: { name: 'React' } });
        expect(container.querySelector('span')?.className).toContain('uppercase');
    });
});
```

**Step 2: Run test — expect FAIL**

```bash
cd /home/ilia/Documents/Projects/allmywork
bun run test src/shared/ui/TechStackBrick/TechStackBrick.test.ts
```

**Step 3: Implement TechStackBrick.svelte**

```svelte

<script lang="ts">
import { cn } from '$shared/lib/cn';

interface Props {
    name: string;
    class?: string;
}

let { name, class: className }: Props = $props();

const classes = $derived(cn(
    'brutal-border brutal-shadow bg-white px-4 py-3 text-center',
    'transition-all duration-200',
    'hover:shadow-none hover:translate-x-[2px] hover:translate-y-[2px]',
    className,
));
</script>

<div class={classes}>
    <span class="text-sm uppercase tracking-wide">{name}</span>
</div>
```

**Step 4: Implement TechStackGrid.svelte**

```svelte

<script lang="ts">
import { cn } from '$shared/lib/cn';
import TechStackBrick from './TechStackBrick.svelte';

interface Props {
    skills: string[];
    class?: string;
}

let { skills, class: className }: Props = $props();

const classes = $derived(cn(
    'grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4',
    className,
));
</script>

<div class={classes}>
    {#each skills as skill (skill)}
        <TechStackBrick name={skill} />
    {/each}
</div>
```

**Step 5: Create index.ts**

```typescript
export { default as TechStackBrick } from './TechStackBrick.svelte';
export { default as TechStackGrid } from './TechStackGrid.svelte';
```

**Step 6: Run test — expect PASS**

```bash
cd /home/ilia/Documents/Projects/allmywork
bun run test src/shared/ui/TechStackBrick/TechStackBrick.test.ts
```

**Step 7: Update shared/ui/index.ts** — append:

```typescript
export * from './TechStackBrick';
```

**Step 8: Write TechStackBrick.stories.svelte**

```svelte
<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';
import TechStackBrick from './TechStackBrick.svelte';
import TechStackGrid from './TechStackGrid.svelte';

const { Story } = defineMeta({
    title: 'Shared/TechStackBrick',
    component: TechStackBrick,
    tags: ['autodocs'],
    parameters: {
        layout: 'padded',
        docs: { description: { component: 'Skill badge for the capabilities section. Hover removes shadow for a tactile press.' } },
    },
});
</script>

<Story name="Single Brick">
    {#snippet template()}
        <TechStackBrick name="SvelteKit" />
    {/snippet}
</Story>

<Story name="Grid">
    {#snippet template()}
        <TechStackGrid skills={['SvelteKit', 'TypeScript', 'Tailwind', 'Bun', 'Figma', 'Storybook', 'Vitest', 'Playwright']} />
    {/snippet}
</Story>
```

**Step 9: Commit**

```bash
cd /home/ilia/Documents/Projects/allmywork
git add src/shared/ui/TechStackBrick/ src/shared/ui/index.ts
git commit -m "feat(shared/ui): add TechStackBrick and TechStackGrid components"
```

---

## Task 10: Run all tests and validate Storybook

This is a verification gate — no new code is written, only validation.

**Step 1: Run full unit test suite**

```bash
cd /home/ilia/Documents/Projects/allmywork
bun run test
```

Expected: All tests pass. Note any failures and fix them in the relevant component task before continuing.

**Step 2: Type-check**

```bash
cd /home/ilia/Documents/Projects/allmywork
bun run check
```

Expected: Zero errors. If `svelte-check` reports errors in `.stories.svelte` files related to `defineMeta`, confirm `@storybook/addon-svelte-csf` types are installed:

```bash
bun add -D @storybook/addon-svelte-csf
```

**Step 3: Lint all files**

```bash
cd /home/ilia/Documents/Projects/allmywork
bun run lint
```

Expected: Zero errors. Fix any Biome lint warnings (unused imports, etc.) before continuing.

**Step 4: Start Storybook and verify all stories render**

```bash
cd /home/ilia/Documents/Projects/allmywork
bun run storybook
```

Visit http://localhost:6006. Confirm all stories appear in the sidebar:
- Shared/Badge — 5 stories
- Shared/Button — 6 stories
- Shared/Card — 4 stories
- Shared/Section — 3 stories
- Shared/Input — 6 stories
- Shared/TechStackBrick — 2 stories

**Step 5: Commit any fixes**

```bash
cd /home/ilia/Documents/Projects/allmywork
git add -A
git commit -m "fix(shared/ui): resolve type errors and lint warnings from verification pass"
```

---

## Task 11: Update HomePage to use the design system

Replace the placeholder `HomePage.svelte` with a layout that demonstrates the design system is wired up and functional. This is not the final portfolio content — it's a foundation smoke test.

**Files:**
- Modify: `/home/ilia/Documents/Projects/allmywork/src/pages/home/ui/HomePage.svelte`

**Step 1: Write HomePage.svelte**

```svelte

<script lang="ts">
import { Badge } from '$shared/ui/Badge';
import { Button } from '$shared/ui/Button';
import { Card } from '$shared/ui/Card';
import { Container, Section } from '$shared/ui/Section';
import { TechStackGrid } from '$shared/ui/TechStackBrick';
</script>

<Section>
    <Container>
        <div class="py-20 space-y-12">
            
            <div>
                <h1>allmy.work</h1>
                <div class="brutal-border-top pt-4 mt-4">
                    <p class="text-sm uppercase tracking-wider opacity-60">Portfolio Foundation — Design System Active</p>
                </div>
            </div>

<div class="grid md:grid-cols-3 gap-6">
                <Card background="slate" noPadding class="p-6">
                    <p class="text-sm opacity-60 mb-2">Stack</p>
                    <p>SvelteKit + Bun</p>
                </Card>
                <Card background="slate" noPadding class="p-6">
                    <p class="text-sm opacity-60 mb-2">Styling</p>
                    <p>Tailwind CSS v4</p>
                </Card>
                <Card background="slate" noPadding class="p-6">
                    <p class="text-sm opacity-60 mb-2">Components</p>
                    <p>Shared UI ready</p>
                </Card>
            </div>

<div class="flex gap-3 flex-wrap">
                <Badge variant="default">SvelteKit</Badge>
                <Badge variant="primary">Brutalist</Badge>
                <Badge variant="secondary">FSD</Badge>
                <Badge variant="outline">Open Source</Badge>
            </div>

<div class="flex gap-4 flex-wrap">
                <Button variant="primary">View Work</Button>
                <Button variant="secondary">About</Button>
                <Button variant="outline">Contact</Button>
                <Button variant="ghost">Learn More</Button>
            </div>

<Card background="white">
                <h4 class="mb-6">Technologies</h4>
                <TechStackGrid skills={['SvelteKit', 'TypeScript', 'Tailwind', 'Bun', 'Storybook', 'Vitest']} />
            </Card>
        </div>
    </Container>
</Section>
```

**Step 2: Start dev server and verify**

```bash
cd /home/ilia/Documents/Projects/allmywork
bun run dev
```

Visit http://localhost:5173. Confirm:
- Ochre-clay background renders
- Fraunces font loads for the h1
- Badge, Button, Card, TechStackGrid components render correctly
- No console errors

**Step 3: Commit**

```bash
cd /home/ilia/Documents/Projects/allmywork
git add src/pages/home/ui/HomePage.svelte
git commit -m "feat(pages/home): wire up design system components in HomePage smoke test"
```

---

## Completion Checklist

Before declaring this plan complete, verify every item:

- [ ] `CLAUDE.md` includes code style section
- [ ] Storybook starts without errors
- [ ] `bun run test` — all tests pass
- [ ] `bun run check` — zero TypeScript errors
- [ ] `bun run lint` — zero Biome errors
- [ ] `bun run dev` — dev server compiles and page renders with ochre background and Fraunces font
- [ ] Storybook shows stories for: Badge, Button, Card, Section, Input, TechStackBrick
- [ ] All components use Svelte 5 runes (`$props`, `$derived`) — no `export let`
- [ ] All components import via FSD aliases (`$shared/...`)
- [ ] All commits follow `prefix(scope): description` convention

---

## Reference Paths

| Resource | Path |
|---|---|
| Figma prototype root | `/home/ilia/Downloads/High-End Portfolio Design System(1)/` |
| Prototype theme.css | `/home/ilia/Downloads/High-End Portfolio Design System(1)/src/styles/theme.css` |
| Prototype components | `/home/ilia/Downloads/High-End Portfolio Design System(1)/src/app/components/` |
| glyphdiff Button (reference) | `/home/ilia/Documents/Projects/glyphdiff/src/shared/ui/Button/Button.svelte` |
| glyphdiff stories (reference) | `/home/ilia/Documents/Projects/glyphdiff/src/shared/ui/Button/Button.stories.svelte` |
| Project root | `/home/ilia/Documents/Projects/allmywork/` |
| Shared UI | `/home/ilia/Documents/Projects/allmywork/src/shared/ui/` |
| App CSS | `/home/ilia/Documents/Projects/allmywork/src/app/styles/app.css` |
| Svelte config | `/home/ilia/Documents/Projects/allmywork/svelte.config.js` |
| FSD aliases | `$shared`, `$pages`, `$features`, `$entities`, `$widgets` |