skills.rest
covoiturage-gouv-fr
covoiturage-gouv-frOFFICIAL
Explore all skills by this author →
WebsiteGitHub

frontend

Define frontend patterns for Next.js 15, DSFR, and map/chart integrations.

36|12|Updated Nov 7, 2018
Search Tags:#charts#frontend#react#hooks#nextjs#maps#dsfr
One-click install
npx skills add https://github.com/covoiturage-gouv-fr/mono --skill frontend-covoiturage-gouv-fr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend
Source: https://github.com/covoiturage-gouv-fr/mono/tree/main/.claude/skills/frontend
Command: npx skills add https://github.com/covoiturage-gouv-fr/mono --skill frontend-covoiturage-gouv-fr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides patterns, components, and practical guidance for building modern frontend applications (Next.js 15) with DSFR styling, API hooks, maps, charts, and search integrations for partner dashboards and public statistics.

Core Features & Use Cases

  • Reusable UI components and DSFR integration (Button, Input, Table, etc.) across partner dashboards and observatory pages.
  • API data access patterns with custom hooks (useRestQuery and related helpers) for consistent data fetching.
  • Map and chart integrations (MapLibre/Deck.gl, Chart.js) for interactive visualizations.
  • Patterns for app partners and app observatory workloads, including routing, layouts, and conventions.

Quick Start

Follow the App Partners or App Observatory patterns to scaffold a new frontend page using Next.js 15, DSFR components, and Map/Chart integrations.

Frequently Asked Questions about frontend

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

FAQPage Schema
How do I build a Next.js 15 dashboard with DSFR components?▼

To build a Next.js 15 dashboard with DSFR components, follow the App Partners or App Observatory patterns. These specify routing, layouts, and conventions for consistent UI component reuse across partner dashboards and public statistics pages.

What's the best way to structure React custom hooks for API data fetching?▼

The best way to structure React custom hooks for API data fetching is using the useRestQuery helper. This pattern ensures consistent data access and reusable logic across Next.js 15 partner dashboards and observatory pages.

How do I integrate MapLibre and Chart.js in a Next.js frontend application?▼

You integrate MapLibre and Chart.js in a Next.js frontend application by following the specified technical patterns. These conventions guide map and chart integrations using MapLibre, Deck.gl, and Chart.js for interactive visualizations.

Does this frontend pattern work with Meilisearch for search integrations?▼

Yes, this frontend pattern works with Meilisearch for search integrations. The technical conventions specify how to integrate Meilisearch alongside map and chart libraries in Next.js 15 projects for cohesive partner dashboards.

How do I ensure accessible UI consistency across public statistics dashboards?▼

You ensure accessible UI consistency across public statistics dashboards by applying the provided DSFR integration patterns. This approach standardizes reusable UI components like Buttons, Inputs, and Tables for cohesive UX.

Related Skills

Explore More Software Engineering Skills→
vecearvecear

storybook-setup

Automate Storybook setup, configuration, and CSF3 story authoring for frontend projects.

Community
Intermediate
DanifelipaezDanifelipaez
1

frontend-react

Develop a NeoCafeIA frontend with Next.js 15, React 19, and TypeScript.

Community
Intermediate
cogidoocogidoo

maplibre-tile-sources

Configure MapLibre GL JS data sources, glyphs, sprites, and tile schemas.

Community
Intermediate
HouseGarofaloHouseGarofalo
3

data-visualization

Generate React data visualizations with Recharts and Chart.js.

Official
Intermediate