skills.rest
aharstad91
aharstad91COMMUNITY
Explore all skills by this author →
GitHub

bimverdi-design

Generate frontend UI components and pages for bimverdi.no using the BIM Verdi design system.

1|Updated Nov 10, 2025
Search Tags:#html#frontend#design system#css#component generation#ui design#bimverdi
One-click install
npx skills add https://github.com/aharstad91/bimverdi-v2 --skill bimverdi-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bimverdi-design
Source: https://github.com/aharstad91/bimverdi-v2/tree/main/.claude/skills/bimverdi-design
Command: npx skills add https://github.com/aharstad91/bimverdi-v2 --skill bimverdi-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill ensures that frontend development for bimverdi.no adheres to a strict, established design system, preventing generic UI patterns and maintaining a consistent, professional aesthetic.

Core Features & Use Cases

  • Design System Enforcement: Provides guidelines and examples for colors, typography, spacing, layout, and components.
  • Anti-Pattern Avoidance: Explicitly lists and contrasts common AI-generated design defaults with BIM Verdi's preferred styles.
  • Component Generation: Offers examples and rules for creating buttons, forms, cards, and sections.
  • Use Case: When building a new feature for bimverdi.no, use this skill to generate the HTML and CSS structure for a form, ensuring it matches the brand's specific look and feel, uses the correct Norwegian text, and avoids common UI anti-patterns.

Quick Start

Generate a primary CTA button using the BIM Verdi design system.

Frequently Asked Questions about bimverdi-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate UI components that match the BIM Verdi design system?▼

This skill generates frontend HTML and CSS for UI components like buttons and forms, enforcing the BIM Verdi design system's enterprise-calm aesthetics, warm orange accents, and whitespace-driven layout to prevent generic patterns.

What are the UI design anti-patterns to avoid when building frontend pages?▼

When building frontend pages, avoid common AI-generated design defaults by contrasting them against BIM Verdi's preferred styles, which rely on specific color palettes, typography rules, and dividers instead of generic UI patterns.

Can I use this design system skill for generating Norwegian website text?▼

Yes, this skill supports generating Norwegian website text. When building features for bimverdi.no, it generates HTML and CSS components that incorporate the correct Norwegian text alongside the brand's UI design.

Does this component generation skill require external dependencies?▼

No, this component generation skill requires no external dependencies. It operates independently using internal references to provide the design system guidelines, color palettes, and typography rules for frontend UI generation.

What is the best way to structure a frontend form using a whitespace-driven layout?▼

The best way to structure a frontend form is by applying the BIM Verdi design system rules, which utilize a whitespace-driven layout with dividers, specific spacing rules, and enterprise-calm aesthetics to ensure professional consistency.

Related Skills

Explore More Design & Creative Skills→
algusaemalgusaem

tailwind-design-system

Build Tailwind CSS design systems with semantic tokens and CVA-based components.

Community
Intermediate
SpaceZephyrSpaceZephyr
333

frontend-design

Create responsive frontend interfaces from rough UI requirements using HTML, CSS, and JavaScript.

Community
Advanced
Kin3XcKin3Xc

frontend-design

Transform vague UI requirements into token-based frontend code for React, Vue, Svelte, and Next.js.

Community
Advanced
AITOBIAS04AITOBIAS04
3

frontend-design

Design and code distinctive frontend interfaces with bold, cohesive aesthetics.

Community
Advanced