From craft-workspace-webconsulting-skills
Enforces webconsulting.at design system with Tailwind brand color palettes, Hanken Grotesk typography, and MDX component structures for consistent frontend UI development.
npx claudepluginhub dirnbauer/webconsulting-skillsThis skill uses the workspace's default tool permissions.
**Persona**: Innovative, Technical, Professional ("Senior Solutions Architect")
Supplies DESIGN.md files reverse-engineered from 55+ developer websites like Stripe, Vercel, Linear to give AI coding agents instant design context for pixel-perfect UI matching target styles.
Reviews, designs, builds, improves, and refactors React UI components using TailwindCSS, Radix UI, and shadcn/ui. For accessible design systems, responsive layouts, theming, and dark mode.
Generates standalone HTML components and composes them into branded full pages from design systems, with embedded CSS, responsive design, and brand integration. Invoke via /html-page or /html-page-quick.
Share bugs, ideas, or general feedback.
Persona: Innovative, Technical, Professional ("Senior Solutions Architect")
Tone: Clear, concise, authoritative. Avoid marketing fluff.
Language: German (Primary) / English (Technical documentation)
| Token | Light Mode | Dark Mode | Tailwind Class | Usage |
|---|---|---|---|---|
| Primary | #1b7a95 | #66c4e1 | text-webcon-primary | Links, primary buttons, active states |
| Primary Light | #66c4e1 | #9dd8eb | text-webcon-primary-light | Hover states, accents |
| Primary 50 | #e8f4f8 | #0f3d4a | bg-webcon-primary-50 | Light backgrounds |
| Primary 100 | #c5e4ed | #155d73 | bg-webcon-primary-100 | Subtle backgrounds |
| Primary 200 | #9dd2e2 | #1b7a95 | bg-webcon-primary-200 | Borders, highlights |
| Primary 700 | #1b7a95 | #66c4e1 | text-webcon-primary-700 | Primary text |
| Primary 800 | #155d73 | #9dd8eb | text-webcon-primary-800 | Strong emphasis |
| Primary 900 | #0f4555 | #c5e8f2 | text-webcon-primary-900 | Maximum contrast |
| State | Color | Light BG | Border | Tailwind Prefix |
|---|---|---|---|---|
| Success | #16a34a / #4ade80 | #dcfce7 / #14532d | #86efac / #22c55e | webcon-success |
| Error | #dc2626 / #f87171 | #fee2e2 / #450a0a | #fca5a5 / #ef4444 | webcon-error |
| Warning | #d97706 / #fbbf24 | #fef3c7 / #451a03 | #fcd34d / #f59e0b | webcon-warning |
| Info | #1b7a95 / #66c4e1 | #e8f4f8 / #0f3d4a | #66c4e1 / #1b7a95 | webcon-info |
// Primary button
<button className="bg-webcon-primary text-white hover:bg-webcon-primary-800">
Action
</button>
// Info callout
<div className="bg-webcon-info-light border border-webcon-info-border text-webcon-info">
Information message
</div>
// Success state
<div className="bg-webcon-success-light border border-webcon-success-border">
<CheckIcon className="text-webcon-success" />
</div>
| Element | Font Family | Weight | Usage |
|---|---|---|---|
| All Text | Hanken Grotesk | 400-700 | Body, headings, UI |
| Display | Hanken Grotesk (wide) | 600, 700 | Hero titles, emphasis |
| Code | System monospace | 400 | Code blocks, inline code |
Font Configuration (Next.js):
import { Hanken_Grotesk } from 'next/font/google'
const hankenGrotesk = Hanken_Grotesk({
subsets: ['latin'],
variable: '--font-hanken-grotesk',
display: 'swap',
})
CSS Variables:
--font-sans: var(--font-hanken-grotesk), ui-sans-serif, system-ui, sans-serif;
--font-display: var(--font-hanken-grotesk), ui-sans-serif, system-ui, sans-serif;
--font-display--font-variation-settings: 'wdth' 125;
When generating content or frontend components, use the following structure. Do NOT use raw HTML.
Use for topic tabs (e.g., “Public site” vs “Editor guide”); for TYPO3, this collection targets v14 only:
<Tabs defaultValue="v14">
<TabsList>
<TabsTrigger value="v14">TYPO3 v14</TabsTrigger>
</TabsList>
<TabsContent value="v14">
Content for TYPO3 v14...
</TabsContent>
</Tabs>
Use ComparisonTable for feature matrices. Supports boolean checkmarks:
<ComparisonTable
headers={['Feature', 'TYPO3 v14']}
rows={[
{ label: 'Content Blocks 2.x', values: [true] },
{ label: 'Symfony 7.2', values: [true] },
{ label: 'PHP 8.2+', values: [true] }
]}
/>
<CodeBlock
language="php"
filename="Classes/Controller/PageController.php"
highlightLines={[3, 7]}
>
{`<?php
declare(strict_types=1);
namespace Vendor\\Extension\\Controller;
use Psr\\Http\\Message\\ResponseInterface;
use TYPO3\\CMS\\Extbase\\Mvc\\Controller\\ActionController;
final class PageController extends ActionController
{
public function indexAction(): ResponseInterface
{
return $this->htmlResponse();
}
}`}
</CodeBlock>
<Callout type="info" title="Best Practice">
Always use `declare(strict_types=1);` in PHP files.
</Callout>
<Callout type="warning" title="Breaking Change">
This API changed in TYPO3 v14.
</Callout>
<Callout type="danger" title="Security">
Never expose sensitive configuration files.
</Callout>
<MDXImage
src="/images/architecture-diagram.png"
alt="TYPO3 Extension Architecture"
caption="Figure 1: Domain-Driven Design in TYPO3 Extensions"
/>
All diagrams must explicitly override the theme to match the webconsulting palette:
%%{init: {'theme': 'base', 'themeVariables': {
'primaryColor': '#1b7a95',
'primaryTextColor': '#ffffff',
'primaryBorderColor': '#155d73',
'lineColor': '#404040',
'secondaryColor': '#d97706',
'tertiaryColor': '#fef3c7',
'edgeLabelBackground': '#ffffff'
}}}%%
graph TD
A[Client Request] -->|HTTP| B(Load Balancer)
B --> C{TYPO3 Backend}
C -->|Cache Hit| D[Response]
C -->|Cache Miss| E[Database]
E --> D
CSS enhancements (automatically applied via base.css):
#f0f0f0)focus:ring-2 focus:ring-webcon-primary focus:ring-offset-2outline: 2px solid #1B7A95alt textcaption prop in MDXImage componentalt=""| Breakpoint | Width | Tailwind Prefix |
|---|---|---|
| Mobile | < 640px | (default) |
| Tablet | ≥ 640px | sm: |
| Desktop | ≥ 1024px | lg: |
| Wide | ≥ 1280px | xl: |
Use consistent spacing based on 4px grid:
| Token | Value | Usage |
|---|---|---|
space-1 | 4px | Icon gaps |
space-2 | 8px | Inline elements |
space-4 | 16px | Component padding |
space-6 | 24px | Section gaps |
space-8 | 32px | Major sections |
space-12 | 48px | Page sections |
<button class="bg-webcon-primary hover:bg-webcon-primary-800 text-white font-medium px-6 py-3 rounded-lg transition-colors focus:ring-2 focus:ring-webcon-primary focus:ring-offset-2">
Primary Action
</button>
<button class="border-2 border-webcon-primary text-webcon-primary hover:bg-webcon-primary-50 font-medium px-6 py-3 rounded-lg transition-colors">
Secondary Action
</button>
<button class="text-muted-foreground hover:text-webcon-primary hover:bg-muted px-4 py-2 rounded transition-colors">
Ghost Action
</button>
The design system supports automatic dark mode via the .dark class. All webcon-* colors automatically invert:
| Token | Light | Dark |
|---|---|---|
--webcon-primary | #1b7a95 | #66c4e1 |
--webcon-success | #16a34a | #4ade80 |
--webcon-error | #dc2626 | #f87171 |
--webcon-warning | #d97706 | #fbbf24 |
Usage: Apply dark class to a parent element (usually <html>) to enable dark mode.
The design system is compatible with shadcn/ui components. Semantic tokens map to shadcn conventions:
| shadcn Token | webconsulting Equivalent |
|---|---|
--background | Light: white, Dark: neutral-950 |
--foreground | Light: neutral-950, Dark: white |
--primary | --webcon-primary |
--destructive | --webcon-error |
--muted | Neutral grays |
--accent | Light backgrounds |
--ring | Focus ring color |