hcp-frontend

Codify HCP UI frontend patterns for SvelteKit 2, Svelte 5 runes, and shadcn-svelte.

2|Updated Feb 27, 2026
One-click install
npx skills add https://github.com/AI-Riksarkivet/ra-hcp --skill hcp-frontend
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: hcp-frontend
Source: https://github.com/AI-Riksarkivet/ra-hcp/tree/main/.claude/skills/hcp-frontend
Command: npx skills add https://github.com/AI-Riksarkivet/ra-hcp --skill hcp-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Helps developers follow standardized frontend patterns and conventions for the HCP UI, ensuring consistency and faster onboarding.

Core Features & Use Cases

  • SvelteKit 2 + Svelte 5 usage (runes mode) with the shadcn-svelte component library
  • Remote function usage patterns, settings forms, and dialog patterns (FormDialog, SaveButton)
  • Clear project layout guidance, component reuse, and quality checks

Quick Start

Review this guide before modifying frontend code to align with HCP patterns.

Frequently Asked Questions about hcp-frontend

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

FAQPage Schema
How do I structure a SvelteKit 2 project using Svelte 5 runes mode?

Structure a SvelteKit 2 project by adopting Svelte 5 runes mode alongside a standardized project layout, ensuring clear code organization and reusable component patterns for faster onboarding.

What is the best way to implement settings forms and dialogs in Svelte?

The best way to implement settings forms and dialogs in Svelte is by using standardized reusable patterns like FormDialog and SaveButton to ensure UI consistency across the project.

Does the HCP frontend pattern guide support shadcn-svelte and Tailwind CSS?

Yes, the HCP frontend pattern guide fully supports using shadcn-svelte components and Tailwind CSS for styling within the Deno runtime environment.

How do I use remote functions in a SvelteKit frontend application?

Use remote functions in a SvelteKit frontend application by following established remote function usage patterns to manage data fetching and state operations consistently.

What are the testing and code organization guidelines for HCP UI components?

Guidelines for HCP UI components enforce quality checks, standardized code organization, and the creation of Storybook stories to verify component behavior and promote reuse.