skills.rest
ConductionNL
ConductionNLOFFICIAL
Explore all skills by this author →
WebsiteGitHub

team-frontend

Implements Vue.js frontend code for Nextcloud apps following Conduction scrum team patterns.

1|Updated Jul 16, 2026
Search Tags:#accessibility#frontend#vue#webpack#scrum#pinia#nextcloud
One-click install
npx skills add https://github.com/ConductionNL/buildiq --skill team-frontend-conductionnl
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: team-frontend
Source: https://github.com/ConductionNL/buildiq/tree/main/.claude/skills/team-frontend
Command: npx skills add https://github.com/ConductionNL/buildiq --skill team-frontend-conductionnl

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @nextcloud/vue, @conduction/nextcloud-vue, pinia, vue-router, vue-material-design-icons, @nextcloud/l10n, and includes references (resource) components.

What problem does it solve? Frontend developers working on Conduction Nextcloud apps must follow many project-specific conventions (Pinia stores, @conduction/nextcloud-vue components, Nextcloud t() signatures, webpack aliases) that generic AI coding assistants do not know, leading to inconsistent or non-compliant code. ## Core Features & Use Cases - Conduction Vue Patterns: Enforces the exact tech stack and component patterns used across the workspace, including Vue 2 with script setup, Pinia stores via useObjectStore, Vue Router history mode, and @nextcloud/vue components. - Shared Library Enforcement: Mandates use of the @conduction/nextcloud-vue component library (CnDataTable, CnDetailViewLayout, CnSettingsSection) with the correct webpack conditional alias configuration. - Quality Pipeline: Runs lint, stylelint, unit tests, and build after implementation, then updates plan.json, tasks.md, and closes the GitHub issue. - Use Case: A scrum team member picks up the next pending frontend task from plan.json and has the agent implement a sidebar component with translations, scoped styles, and WCAG AA accessibility, fully compliant with Dutch government standards. ## Quick Start Ask the agent to act as the team frontend developer and implement the next pending frontend task from plan.json.

Frequently Asked Questions about team-frontend

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

FAQPage Schema
How do I implement a Vue component for a Nextcloud app?▼

Use the script setup pattern with store imports in the setup block and component registration in a regular script block with export default. Always provide a component name, use @nextcloud/vue components like NcAppSidebar, and apply scoped styles only.

What state management library should I use in Nextcloud apps?▼

Use Pinia with defineStore, not Vuex. Conduction apps extend useObjectStore from the @conduction/nextcloud-vue library, which provides plugins for audit trails, files, relations, and lifecycle handling.

How does the Nextcloud t() translation function work?▼

The t() function from @nextcloud/l10n takes the app name as its first argument and the string as the second, for example t('openregister', 'Objects'). All user-visible strings must use t() and never be hardcoded in templates.

Does the @conduction/nextcloud-vue library work outside the monorepo?▼

Yes, it is published on npm and consumed as a package dependency. The webpack config uses a conditional fs.existsSync alias so local source is used in the monorepo while the npm package is used in CI.

What accessibility standards apply to Dutch government frontend code?▼

WCAG 2.1 AA is legally required under the Besluit digitale toegankelijkheid overheid. Code must use CSS custom properties for NL Design System theming, never hardcode colors, and maintain required contrast ratios.

Why does my webpack config break when adding plugins?▼

Replacing the plugins array overwrites the defaults from @nextcloud/webpack-vue-config, including DefinePlugin. Mutate the existing array with plugins.push() instead and preserve the base configuration.

Related Skills

Explore More Software Engineering Skills→
andrewcodesitandrewcodesit

define-spec

Creates concise implementation-ready specs from project ideas, feature requests, or vague goals.

Community
Basic
kk20300113-pngkk20300113-png

ship

Automate code release workflows from branch merging to pull request creation.

Community
Advanced
ElderEvilElderEvil

pinia

Create type-safe Vue 3 stores with Pinia's defineStore.

Community
Intermediate
majesticlabs-devmajesticlabs-dev
47

frontend-design

Create distinctive frontend interfaces with typography, color, and motion guidelines.

Official
Advanced