From craft-workspace-webconsulting-skills
Applies the webconsulting.at brand system: voice, colors, typography, MDX components, Mermaid theming, accessibility, responsive breakpoints, dark mode, and shadcn/ui tokens. For TYPO3 templates and frontend components.
How this skill is triggered — by the user, by Claude, or both
Slash command
/craft-workspace-webconsulting-skills:webconsulting-brandingThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
> Source: https://github.com/dirnbauer/webconsulting-skills
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 | 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;
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.4', 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 |
npx claudepluginhub dirnbauer/webconsulting-skillsGenerates design systems and UX/UI with Astro, Svelte, Tailwind CSS, Material Design 3, and OKLCH. Covers style, color, typography, layout, accessibility, frontend code.
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.
Provides UI/UX guidelines, 50+ styles, palettes, font pairings, charts, and priority rules for accessibility, layouts, performance in React, Next.js, Vue, Svelte, Tailwind, shadcn/ui, SwiftUI, React Native, Flutter.