skills.rest
TechsioCZ
TechsioCZOFFICIAL
Explore all skills by this author →
GitHub

footer-usage

Organize and render reusable site footers with @techsio/ui-kit Footer primitives.

2|Updated Dec 2, 2024
Search Tags:#accessibility#layout#react#component#footer#ui-kit
One-click install
npx skills add https://github.com/TechsioCZ/new-engine --skill footer-usage
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: footer-usage
Source: https://github.com/TechsioCZ/new-engine/tree/main/libs/ui/skills/footer-usage
Command: npx skills add https://github.com/TechsioCZ/new-engine --skill footer-usage

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams build consistent, reusable site footers using the UI-kit Footer components instead of ad-hoc HTML, ensuring a cohesive design system across pages.

Core Features & Use Cases

  • Use Footer.Container, Footer.Section, Footer.Title, Footer.List, and Footer.Bottom to compose multi-column footers.
  • Leverage adapters and tokens (size, layout, direction, sectionFlow) to adapt the footer to various breakpoints and frameworks.
  • Apply across projects that require a standardized, accessible footer structure with consistent styling.

Quick Start

Instantiate the Footer with a size and layout, then compose it with Footer.Container, Footer.Section, Footer.Title, Footer.List, and Footer.Bottom.

Frequently Asked Questions about footer-usage

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

FAQPage Schema
How do I build a responsive multi-column footer in React?▼

Build a responsive multi-column footer in React by composing reusable UI-kit Footer primitives like Container, Section, Title, and List. This approach replaces ad-hoc HTML structures with a standardized, accessible component layout.

What is the best way to standardize site footers across different React pages?▼

The best way to standardize site footers is to use a shared component system enforcing core primitives and token-driven layout options. This ensures a cohesive design system across pages instead of inconsistent, manually coded footers.

Can I adapt a UI-kit footer layout for different framework integrations?▼

Yes, you can adapt the footer layout for different framework integrations using provided adapters. These adapters, along with tokens for size, layout, direction, and sectionFlow, allow the footer to adjust to various breakpoints and environments.

Does this footer component support accessibility and responsive design tokens?▼

Yes, the footer component supports accessibility and responsive design through token-driven density and layout options. Tokens control size, layout, direction, and sectionFlow to ensure the footer structure adapts properly across multiple breakpoints.

What primitives do I need to compose a multi-column footer?▼

To compose a multi-column footer, you need the core primitives: Container, Section, Title, List, Link, Text, Divider, and Bottom. You instantiate the footer with a size and layout, then compose these elements to structure the content.

Related Skills

Explore More Design & Creative Skills→
TechsioCZTechsioCZ
2

select-usage

Render labeled single or multiple selects with Zag.js in React apps.

Official
Intermediate
ddddd-xy126ddddd-xy126

layout-generator

Generate Vue layout scaffolds with header, footer, and sidebars from UI designs.

Community
Advanced
lionheartapplionheartapp

mobile-android-design

Design and implement Material Design 3 interfaces with Jetpack Compose.

Community
Intermediate
nikglavinnikglavin
1

lyra-grid-system

Create responsive 12-column CSS grid layouts with 8pt spacing.

Community
Intermediate