UniFi Portal Development

A comprehensive guide for developing the UniFi Portal WordPress plugin with Vue.js frontend and PHP backend.

What This Skill Does

Provides build commands, code style guidelines, testing workflows, and architectural patterns for UniFi Portal development. Ensures consistent code quality across PHP (PSR-12/WordPress standards) and Vue.js (Composition API) components.

Instructions

Build & Development Commands

When the user needs to build or run the project:

1. **Frontend Development**

- Run `yarn dev` to start the dev server with hot module replacement

- Run `yarn prod` to build optimized production bundles

2. **PHP Backend**

- Run `composer dev` to optimize autoloader for development

- Run `composer prod` to install dependencies and optimize for production

3. **Testing**

- Run `composer test` to execute all PHPUnit tests

- Run `composer test tests/SpecificTest.php` to run a single test file

- Run `composer phpcs` to check code style with PHP CodeSniffer

- Run `composer phpcbf` to automatically fix code style issues

Code Style Standards

When writing or reviewing code:

**PHP Files:**

Follow PSR-12 standard for general PHP files

Follow WordPress Coding Standards for WordPress-specific files

Use PascalCase for class and interface names

Use camelCase for method and property names

Always include type hints for parameters

Always declare return types

Document array shapes in PHPDoc comments

Use try-catch blocks with consistent response format

Validate all user input

Check user capabilities before admin actions

**Vue.js Components:**

Use Composition API exclusively (no Options API)

Document components with clear comments explaining purpose

Use PascalCase for component names

Leverage auto-imports for components (no manual imports needed)

Use camelCase for methods and properties

Include TypeScript-style type annotations in comments where helpful

**CSS/SCSS:**

Use BEM (Block Element Modifier) naming convention

Write styles in SCSS format

Keep styles scoped to components when possible

Architecture & Organization

When creating new features or refactoring:

1. **PHP Structure**

- Organize classes under PSR-4 namespaced directories in `src/`

- Use autoloader for all class imports (no manual requires)

- Group related classes by feature/domain

2. **Frontend Structure**

- Place Vue components in `src/frontend/templates/unifi-portal`

- Organize by feature when project grows

3. **Tests**

- Write PHPUnit tests in `tests/` directory

- Mirror the namespace structure of source files

- Test both success and failure scenarios

Security Best Practices

Always apply these security measures:

Validate and sanitize all user input

Use WordPress nonces for form submissions

Check user capabilities with `current_user_can()` before privileged operations

Escape output appropriately (`esc_html`, `esc_attr`, `wp_kses`)

Use prepared statements for database queries

Never trust client-side data

Error Handling

Implement consistent error handling:

Wrap risky operations in try-catch blocks

Return consistent JSON response format: `{ success: bool, data: mixed, message: string }`

Log errors appropriately for debugging

Return user-friendly error messages (avoid exposing internals)

Examples

Running Tests Before Commit

```bash

composer phpcs && composer test

```

Building for Production

```bash

yarn prod && composer prod

```

Creating a New PHP Class

Follow PSR-4 autoloading structure:

Namespace: `UniFiPortal\Feature\SubFeature`

File location: `src/Feature/SubFeature/ClassName.php`

Class name matches filename

Writing a Vue Component

Use Composition API with clear documentation:

```vue

// Component: UserProfile

// Purpose: Displays user information and settings

import { ref, computed } from 'vue'

const userName = ref('')

const isAdmin = computed(() => checkAdminRole())

</script>

```

Constraints

Always run code style checks before committing

Never skip type hints or return types in PHP

Use the specified naming conventions consistently

Follow PSR-12 for PHP and BEM for CSS

Test critical functionality with PHPUnit

Validate and sanitize all inputs for security

Use Composition API exclusively for Vue components

UniFi Portal Development

Safety Concern

UniFi Portal Development

What This Skill Does

Instructions

Build & Development Commands

Code Style Standards

Architecture & Organization

Security Best Practices

Error Handling

Examples

Running Tests Before Commit

Building for Production

Creating a New PHP Class

Writing a Vue Component

Constraints

Reviews (0)